0
点赞
收藏
分享

微信扫一扫

elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变

小暴龙要抱抱 2024-06-02 阅读 3

⭐主要使用el-tablecell-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>
举报

相关推荐

0 条评论