el-table 行高亮，点击行改变背景

背景：

在table表格中，有多条数据展示，我们希望点击列表的操作按钮之后，当前被点击的行是被选中的状态，即行高亮。

通过官网的方法，找到了highlight-current-row属性。

官网链接：点击跳转

效果对比：

实现效果之前：

实现效果之后：

核心代码：

<el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%" >

官网示例：

<template><el-tableref="singleTableRef":data="tableData"highlight-current-rowstyle="width: 100%"@current-change="handleCurrentChange"><el-table-column type="index" width="50" /><el-table-column property="date" label="Date" width="120" /><el-table-column property="name" label="Name" width="120" /><el-table-column property="address" label="Address" /></el-table><div style="margin-top: 20px"><el-button @click="setCurrent(tableData[1])">Select second row</el-button><el-button @click="setCurrent()">Clear selection</el-button></div>
</template><script lang="ts" setup>
import { ref } from 'vue'import type { TableInstance } from 'element-plus'interface User {date: stringname: stringaddress: string
}const currentRow = ref()
const singleTableRef = ref<TableInstance>()const setCurrent = (row?: User) => {singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: User | undefined) => {currentRow.value = val
}
const tableData: User[] = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>