el-table表格点击列表项可多选并改变列表颜色

1、el-table添加事件row-click

<el-table @row-click="handleRowClick"></el-table>

methods() {
  handleRowClick(row, column, event) {
    // list -- 已选的数据
    let index = this.multipleSelection.findIndex((item) => {
    // 判断已选数组中是否已存在该条数据
      return item.id == row.id;
    });
    if (index == -1) {
      // 如果未存在,设置已选状态,并在list中添加这条数据
      this.$refs.multipleTable.toggleRowSelection(row, true); //设置复选框为选中状态
    } else {
      // 如果已存在,设置未选状态,并在list中删除这条数据
      this.$refs.multipleTable.toggleRowSelection(row, false); //设置复选框为未选状态
    }
  },
}

2、选中行设置颜色

<el-table :row-style="rowClass"></el-table>

data() {
  return: {
    selectRow: [],
  }
},
watch() {
  multipleSelection(data) {
    this.selectRow = [];
    if (data.length > 0) {
      data.forEach((element) => {
        this.selectRow.push(this.listData.indexOf(element));
      });
    }
  },
}
methods: {
  rowClass({ row, rowIndex }) {
    if (this.selectRow.includes(rowIndex)) {
      return { background: "#ffffdd" };
    }
  },
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。