vue3使用Element Plus的el-table,高亮当前点击的单元格
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
⭐主要使用el-table的cell-style属性和cell-click事件
1、给el-table添加cell-style属性和cell-click事件
<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方法实现
<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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)