el-table的复选框勾选整行变色

要实现el-table的复选框勾选整行变色，你可以使用element-ui提供的row-class-name属性结合scoped slot来完成。

首先，你需要为el-table组件添加 row-class-name 属性，并给它绑定一个方法。在这个方法中，你可以根据你的业务逻辑来判断当前行是否被选中，并返回一个自定义的类名。

<template>
  <el-table :data="tableData" :row-class-name="rowClassName">
    <el-table-column type="selection"></el-table-column>
    <!-- ...其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [/* 数据数组 */],
      selectedRows: [] // 用于存储选中的行数据
    };
  },
  methods: {
    rowClassName({ row }) {
      // 判断当前行的数据是否在已选中的行数组中
      if (this.selectedRows.includes(row)) {
        return 'selected-row'; // 返回自定义的类名
      }
      return ''; // 默认不添加类名
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection; // 更新选中的行数组
    }
  }
};
</script>

<style scoped>
.selected-row {
  background-color: #f0f0f0; // 设置选中行的背景色
}
</style>

在上述代码中，我们首先在el-table中添加了type="selection"的el-table-column列，这将生成复选框列。然后，我们使用row-class-name属性绑定了一个方法rowClassName，用于判断行的选中状态并返回一个自定义的类名。

在rowClassName方法中，我们通过判断当前行的数据是否在选中的行数组中，来决定是否添加selected-row类名。当行的数据在选中的行数组中时，我们返回’selected-row’，这样就能为该行添加自定义的样式。

在handleSelectionChange方法中，我们监听复选框的选择事件，并将选中的行数据保存在selectedRows数组中，以便在rowClassName方法中使用。

最后，我们在样式中为selected-row类名指定了背景色，你可以根据自己的需要自定义样式。

这样，当你在el-table中勾选复选框时，被选中的行将展示出自定义的样式。

原文地址：https://blog.csdn.net/weixin_55846296/article/details/136030866

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！