vue2+element ui 中的el-table 选中当前行当前行变色，单选/多选

周bro

已于 2024-08-03 03:17:44 修改

阅读量480

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-07-17 19:27:11 首次发布

本文链接：https://blog.csdn.net/weixin_46631078/article/details/140503489

版权

都是没有单选框/复选框的情况：

无选择框单击行单选：

<template>
  <el-table ref="singleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="handleRowClick"
    :row-class-name="rowClassName">

    <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        // 其他数据...
      ],
      selectedRow: null
    }
  },
  methods: {
    handleRowClick(row) {
      // 设置当前行为选中行
      this.selectedRow = row;
    },
    rowClassName({ row }) {
      // 如果行被选中，则返回 'row-selected' 类，否则返回空字符串
      return this.selectedRow === row ? 'row-selected' : '';
    }
  }
}
</script>

<style>
/* 定义选中的行样式 */
.row-selected td {
  background-color: red !important;
}

/* 定义鼠标悬停时行样式 */
.el-table .el-table__row:hover td {
  background-color: red !important;
}
</style>

无选择框单击任意一行多选：亦可以进行反选

<template>
  <el-table :data="tableData" @row-click="handleRowClick" :row-class-name="rowClassName">
    <el-table-column prop="date" label="日期" width="120"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
          isSelected: false
        },
        {
          date: '2016-05-04',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄',
          isSelected: false
        },
        // 其他数据...
      ],
    };
  },
  methods: {
    handleRowClick(row) {
      // 切换当前行的选中状态
      row.isSelected = !row.isSelected;
    },
    rowClassName({ row }) {
      // 如果行被选中，则返回 'row-selected' 类，否则返回空字符串
      return row.isSelected ? 'row-selected' : '';
    }
  }
};
</script>

<style>
/* 定义选中的行样式 */
.row-selected td {
  background-color: red !important;
}
</style>

有复选框/单选框的情况：

复选框多选：

注：复选框选中当前行变色，点击当前行也变色，并且复选框选中

<template>
  <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
    @selection-change="handleSelectionChange" @row-click="handleRowClick" :row-class-name="rowClassName">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        // 其他数据...
      ],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRowClick(row) {
      // 切换当前行的选中状态
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    rowClassName({ row }) {
      // 如果行在选中数组中，则返回 'row-selected' 类，否则返回空字符串
      return this.multipleSelection.includes(row) ? 'row-selected' : '';
    }
  }
}
</script>

<style>
/* 定义选中的行样式 */
.row-selected td {
  background-color: red !important;
}

/* 定义鼠标悬停时行样式 */
.el-table .el-table__row:hover td {
  background-color: red !important;
}
</style>

单选框单选：其实单选框也可以不加单选框，就和上面没有单选框的一致了，因为只设置单选行的样式就已经是单选了，

注：点击单选框，单选框选中，当前行变色，点击当前行，当前行变色，复选框选中

<template>
  <el-table ref="singleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="handleRowClick"
    :row-class-name="rowClassName">
    <el-table-column label="选择" width="55">
      <template slot-scope="scope">
        <el-radio v-model="selectedRow" :label="scope.row">&nbsp;</el-radio>
      </template>
    </el-table-column>
    <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        // 其他数据...
      ],
      selectedRow: null
    }
  },
  methods: {
    handleRowClick(row) {
      // 设置当前行为选中行
      this.selectedRow = row;
    },
    rowClassName({ row }) {
      // 如果行被选中，则返回 'row-selected' 类，否则返回空字符串
      return this.selectedRow === row ? 'row-selected' : '';
    }
  }
}
</script>

<style>
/* 定义选中的行样式 */
.row-selected td {
  background-color: red !important;
}

/* 定义鼠标悬停时行样式 */
.el-table .el-table__row:hover td {
  background-color: red !important;
}
</style>