vue3使用Element Plus的el-table,高亮当前点击的单元格

⭐主要使用el-tablecell-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>
相关推荐
掘金安东尼1 分钟前
前端周刊第427期(2025年8月4日–8月10日)
前端·javascript·面试
Mintopia14 分钟前
一个月速成 AI 工程师:从代码小白到智能工匠的修炼手册
前端·javascript·aigc
Mintopia18 分钟前
Next.js 全栈:接收和处理请求
前端·javascript·next.js
晓得迷路了1 小时前
栗子前端技术周刊第 94 期 - React Native 0.81、jQuery 4.0.0 RC1、Bun v1.2.20...
前端·javascript·react.js
江城开朗的豌豆1 小时前
React Native 实战心得
javascript
前端小巷子1 小时前
Vue 自定义指令
前端·vue.js·面试
江城开朗的豌豆1 小时前
React状态更新踩坑记:我是这样优雅修改参数的
前端·javascript·react.js
阿珊和她的猫2 小时前
autofit.js: 自动调整HTML元素大小的JavaScript库
开发语言·javascript·html
Stringzhua2 小时前
Vue中的数据渲染【4】
css·vue.js·css3