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

最新推荐文章于 2025-05-23 10:51:42 发布

转载最新推荐文章于 2025-05-23 10:51:42 发布 · 7.3k 阅读

博客提到点击选框或整行均可实现变色效果，内容转自https://www.jianshu.com/p/47aa76b1450e ，主要围绕前端交互的变色功能展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table
  v-show="res"
  border
  ref="multipleTable"
  :data="projectList"
  tooltip-effect="dark"
  style="width: 100%"
  @selection-change="handleSelectionChange"
  @select="handleSelection"
  @row-click="clickRow"
  :row-class-name="tableRowClassName"
>
  <el-table-column type="selection" width="30"></el-table-column>
  <el-table-column label="ID" align="center" prop="id">
    <template slot-scope="scope">{{ scope.row.id }}</template>
  </el-table-column>
  <el-table-column label="项目名称" align="center" prop="name">
    <template slot-scope="scope">{{scope.row.name}}</template>
  </el-table-column>
  <el-table-column label="征收范围" align="center" prop="levy_scope">
    <template slot-scope="scope">{{scope.row.levy_scope}}</template>
  </el-table-column>
  <el-table-column label="拆迁公司" align="center" prop="actuator">
    <template slot-scope="scope">{{scope.row.actuator}}</template>
  </el-table-column>
</el-table>

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

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

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

  // 表单绑定的数据
  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://www.jianshu.com/p/47aa76b1450e