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>
相关推荐
爱学习的程序媛14 小时前
《深入浅出Node.js》核心知识点梳理
javascript·node.js
华仔啊15 小时前
Vue3 如何实现图片懒加载?其实一个 Intersection Observer 就搞定了
前端·vue.js
Robet15 小时前
TS和JS成员变量修饰符
javascript·typescript
方法重载15 小时前
前端性能优化之“代码分割与懒加载”)
javascript
我叫张小白。15 小时前
Vue3 响应式数据:让数据拥有“生命力“
前端·javascript·vue.js·vue3
laocooon52385788616 小时前
vue3 本文实现了一个Vue3折叠面板组件
开发语言·前端·javascript
科普瑞传感仪器16 小时前
从轴孔装配到屏幕贴合:六维力感知的机器人柔性对位应用详解
前端·javascript·数据库·人工智能·机器人·自动化·无人机
n***F87516 小时前
SpringMVC 请求参数接收
前端·javascript·算法
TechMasterPlus17 小时前
VScode如何调试javascript文件
javascript·ide·vscode
北辰alk17 小时前
Vue 中 nextTick 的魔法:为什么它能拿到更新后的 DOM?
vue.js