vue Element-ui 表格多选 修改选中行背景色


  
  
    
  
  
    
  
  
    
  
  
    
  

.el-table >>> .warning-row {
  background-color: #f5f7fa;
}

点击选框 点击整行 都可以变色

handleSelectionChange(val) {
  this.multipleSelection = val;
  console.log("选择框发生变化", val);
},
handleSelection(val, row) {

  // 表单绑定的数据
  this.projectList.forEach((item, i) => {
    if (item.id == row.id) {
      /* console.log(this.numbers.indexOf(i)) */
      if (this.numbers.indexOf(i) == -1) {
        this.numbers.push(i);
      } else {
        this.numbers.splice(this.numbers.indexOf(i), 1);
      }
    }
  });

},
// 点击整行选中
clickRow(row, event, column) {
  this.$refs.multipleTable.toggleRowSelection(row);

  this.projectList.forEach((r, i) => {
    if (r.id == row.id) {
      /* console.log(this.numbers.indexOf(i)) */
      if (this.numbers.indexOf(i) == -1) {
        this.numbers.push(i);
      } else {
        this.numbers.splice(this.numbers.indexOf(i), 1);
      }
    }
  });
  
},
// 选中背景色
tableRowClassName({ row, rowIndex }) {
  let color = "";
  this.numbers.forEach((r, i) => {
    if (rowIndex === r) {
      color = "warning-row";
    }
  });
  return color;
}

参考:https://jsfiddle.net/L5do6L3k/61/

你可能感兴趣的:(vue Element-ui 表格多选 修改选中行背景色)