vue3中el-table选中行变色

在 Vue3 中，`Element UI` 的 `el-table` 组件允许对表格中的行进行选中并改变样式。为了实现选中行变色的效果，你可以通过以下几个步骤操作：

1. 安装依赖：
确保已安装了 Element UI 和相应的版本。如果你还没有安装，可以使用 Vue CLI 或者 npm 来添加依赖：

   npm install element-ui

2. 引入组件和样式：
在你的 Vue 文件中导入 `ElTable` 和相关的样式：

   import { ElTable } from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';

3. 配置选中状态：
在 `el-table` 的组件选项中，设置 `row-class-name` 属性用于动态更改选中行的 CSS 类名：

   <el-table :data="tableData" row-key="id" @selection-change="handleSelectionChange">
     <el-table-column type="index"></el-table-column>
     <!-- 其他列... -->
     <template slot-scope="scope">
       <td class="custom-selected-row-color" v-bind:class="{ selected: scope.$index === selectedRowIndex }">{{ scope.row.name }}</td>
     </template>
   </el-table>

这里假设你有一个名为 `selectedRowIndex` 的变量来跟踪当前选中的行索引。

4. 选中行处理函数：
创建一个方法（如 `handleSelectionChange`）来监听行选择变化，并更新选中行的颜色：

   methods: {
     handleSelectionChange(selectedRows) {
       if (selectedRows.length > 0) {
         this.selectedRowIndex = selectedRows.$index;
       } else {
         this.selectedRowIndex = null; // 取消选中时清空颜色
       }
     }
   },
   data() {
     return {
       tableData: [], // 表格数据数组
       selectedRowIndex: null, // 当前选中行的索引
     };
   },
   created() {
     // 初始化其他配置，例如给每个表行添加默认CSS样式
     this.tableData.forEach((item, index) => {
       item.customClass = this.isRowSelected(index) ? 'selected-row-style' : '';
     });
   },
   computed: {
     isRowSelected(index) {
       return index === this.selectedRowIndex;
     }
   },
   // 根据需求自定义 .selected-row-style 的 CSS 样式
   style: {
     '.selected-row-style': {
       background: 'lightblue', // 更改选中行的背景颜色
       // 可以设置更多样式属性...
     }
   },