el-table中highlight-selection-row用法

`el-table` 是 Element UI 框架提供的一种表格组件，用于展示数据列表，并支持多种交互功能。在 `el-table` 中，`highlight-selection-row` 属性是一个非常实用的功能，它可以帮助用户更清晰地区分选中行和其他行，增强用户体验。

### `highlight-selection-row` 的作用

当你在一个表格中对某一行进行选择操作时，默认情况下，该行会与其他非选中行保持一致的外观样式。而通过开启 `highlight-selection-row` 属性，则可以使选中行突出显示，通常表现为背景色、边框等样式的改变，便于快速识别当前哪些行被选中。

### 使用方法

要在 `el-table` 组件中启用 `highlight-selection-row` 功能，你需要：

1. **配置 `el-table`**：在你的 Vue 组件模板中包含 `el-table` 标签，并在其属性中添加 `highlight-selection-row="true"` 或 `selection-type="row"`。

   <el-table :data="tableData" highlight-selection-row>
     <!-- 表格列配置 -->
   </el-table>

2. **实现选中逻辑**：为了实现在表格内部对行的选择操作以及处理 `highlight-selection-row` 效果，通常需要配合 `el-table-column` 的 `type` 属性设置为 `"selection"` 并管理选中的状态（例如，可以使用数组来存储选中的行索引）。同时，你还需要监听 `el-table` 的 `select` 和 `deselect` 事件来自定义选中逻辑和更新界面效果。

   export default {
     data() {
       return {
         tableData: [...], // 表格数据源
         selectedRows: [], // 存储已选中行的索引
       };
     },
     methods: {
       handleSelectionChange(selection) {
         this.selectedRows = selection.map(item => item.$index);
       },
     },
     mounted() {
       this.tableData.forEach((item, index) => {
         item.isRowSelected = false; // 初始化所有行的选中状态
       });
       // 添加事件监听器
       this.$refs.myTable.on('selection-change', this.handleSelectionChange);
     },
   };

3. **样式自定义**：你可以通过 CSS 来进一步定制选中行的视觉效果。例如：

   .el-table__row--selected {
     background-color: #f5f7fa;
   }

### 示例代码片段

<template>
  <div id="app">
    <el-table ref="myTable" :data="tableData" highlight-selection-row>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <!-- 其他列... -->
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tableData: [
        { date: '2023-1-1', name: '张三', ... },
        // 更多数据...
      ],
      selectedRows: [],
    };
  },
};
</script>

###