在Vue 3中，你可以使用Element Plus（Vue 3的Element UI版本）中的el-table控件来创建表格。以下是如何设置选中行的高亮样式以及获取选中行索引的方法。
- 设置选中行的高亮样式：
你可以通过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; /* 条纹表格高亮颜色 */
}- 获取选中行索引：
你可以使用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响应式数据将保存当前选中行的索引。