vue3 笔记| el-table 控件 选中行高亮 设置选中行样式 获取选中行索引

在Vue 3中，你可以使用Element Plus（Vue 3的Element UI版本）中的el-table控件来创建表格。以下是如何设置选中行的高亮样式以及获取选中行索引的方法。

1. 设置选中行的高亮样式：

你可以通过CSS覆盖默认的选中行样式。首先，在你的组件的<style>标签中或者外部CSS文件中定义你的高亮样式。

/* 覆盖默认的选中行背景色 */
.el-table .el-table__body tr.el-table__row.el-table__row--highlight:not(.el-table__row--striped) {
  background-color: #f0f9eb; /* 你想要的高亮颜色 */
}
 
/* 如果使用条纹 table，同样需要覆盖条纹行的样式 */
.el-table .el-table__body tr.el-table__row.el-table__row--striped.el-table__row--highlight td {
  background-color: #f0f9eb; /* 条纹表格高亮颜色 */
}

2. 获取选中行索引：

你可以使用el-table的@current-change事件来获取当前选中行的索引。

<template>
  <el-table
    :data="tableData"
    @current-change="handleCurrentChange"
    highlight-current-row
  >
    <!-- 你的表格列 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([{ /* 你的数据 */ }]);
const currentRowIndex = ref(null);
 
function handleCurrentChange(row, rowIndex) {
  currentRowIndex.value = rowIndex;
}
</script>

在这个例子中，highlight-current-row属性是用来开启高亮选中行的功能，@current-change事件会在选中行变化时触发，并且你可以通过回调函数获取当前选中行的数据和索引。currentRowIndex响应式数据将保存当前选中行的索引。