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>
相关推荐
huangyiyi6666620 小时前
轮询那些事儿
javascript·前端框架·vue·js
CC码码20 小时前
解决前端多标签页通信:BroadcastChannel
前端·javascript·web
墨鸦_Cormorant20 小时前
Vue 概述以及基本使用
前端·javascript·vue.js
鹏多多20 小时前
使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
前端·javascript·vue.js
艾小码21 小时前
告别页面呆板!这5个DOM操作技巧让你的网站活起来
前端·javascript
正在学习前端的---小方同学1 天前
vue-easy-tree树状结构
前端·javascript·vue.js
毕业设计制作和分享1 天前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
键盘不能没有CV键1 天前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
你的人类朋友1 天前
【Node】认识multer库
前端·javascript·后端
可触的未来,发芽的智生1 天前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构