⭐主要使用el-table 的cell-style属性 和cell-click事件
1、给el-table添加cell-style属性和cell-click事件
html
<el-table
:data="state.dataList"
style="width: 100%"
border
v-loading="state.loading"
:cell-style="cellStyle"
@cell-click="cellClick"
>
<!-- 这里写el-table-colum 章小鱼省略-->
</el-table>
2、cellStyle和cellClick方法实现
TypeScript
<script lang="ts" name="" setup>
const highlightedCell = ref(''); // 控制要高亮单元格标识
// 单元格颜色
const cellStyle = ({ row, column }: any) => {
if (highlightedCell.value && highlightedCell.value === JSON.stringify(row[column.property])) {
return {
padding: '5px 0',
backgroundColor: 'var(--el-color-primary-light-7)',
};
} else {
return {
padding: '5px 0'
};
}
};
// 点击单元格返回
const cellClick = async (row: any, column: any, cell: any, event: any) => {
// console.log(row[column.property], row, column, '点击单元格返回');
highlightedCell.value = JSON.stringify(row[column.property]);
};
</script>