elementUI table表格点击某一行选中并且改变背景色

效果：

• html

<el-table
          :data="data"
          border
          style="width: 100%"
          @row-click="selectRow" //给行添加鼠标点击事件
          :row-style="rowStyle" // 设置行样式
        >

• js

// 行鼠标点击事件
    selectRow(row, column, event) {
      console.log(row);
      console.log(column);
      console.log(event);
      this.name = row.name;
    },
    // 更改选中行背景色
    rowStyle({ row }) {
      if (this.name === row.name) {
        return { 'background-color': '#F7EDED', cursor: 'pointer' };
      }
      return { cursor: 'pointer' };
    },

• css

取消表格鼠标进入高亮显示,要不然会影响rowStyle中自定义的行背景色效果

// 取消表格鼠标进入高亮显示
    .el-table__row:hover > td {
      background-color: transparent;
    }

前端进阶精选：点此去