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>
相关推荐
fmdpenny31 分钟前
Vue3初学之商品的增,删,改功能
开发语言·javascript·vue.js
小美的打工日记44 分钟前
ES6+新特性,var、let 和 const 的区别
前端·javascript·es6
涔溪1 小时前
有哪些常见的 Vue 错误?
前端·javascript·vue.js
程序猿online1 小时前
前端jquery 实现文本框输入出现自动补全提示功能
前端·javascript·jquery
亦黑迷失3 小时前
vue 项目优化之函数式组件
前端·vue.js·性能优化
HsuYang4 小时前
Vite源码学习(九)——DEV流程中的核心类(下)
前端·javascript·架构
计算机-秋大田4 小时前
基于SpringBoot的高校教师科研的设计与实现(源码+SQL脚本+LW+部署讲解等)
java·vue.js·spring boot·后端·课程设计
eason_fan4 小时前
分析vue3源码23(异步组件实现)
vue.js·前端框架·源码阅读
傻小胖4 小时前
React 中hooks之useInsertionEffect用法总结
前端·javascript·react.js
蓝冰凌5 小时前
【整理】js逆向工程
javascript·js逆向