Element-UI 轻松改色表格多选行，实现选中即亮

2023-10-12 12:42:36

前言

在许多应用场景中，我们可能需要为表格中的多选行添加自定义背景颜色，以突出显示选中的行，并方便用户对数据进行操作。本文将通过Element-UI框架，演示如何轻松实现这一功能。

技术选型

Element-UI是一个基于Vue.js的UI框架，提供了丰富的组件库，深受前端开发人员的喜爱。其表格组件具有强大的功能和灵活的定制性，使其非常适合用于此场景。

实现步骤

首先，在Vue.js组件中导入Element-UI的表格组件及其相关的CSS文件：

<template>
  <el-table :data="tableData" @row-click="handleRowClick" @select-on-row="handleSelectOnRow">
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: { ElTable, ElTableColumn },
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Mary', age: 25 },
        { name: 'Bob', age: 30 },
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      row.isHighlighted = !row.isHighlighted
    },
    handleSelectOnRow(selection) {
      selection.forEach(row => {
        row.isHighlighted = true
      })
    }
  }
}
</script>

<style>
.highlighted-row {
  background-color: #f5f5f5 !important;
}
</style>