el-table 实现隐藏列切换时引起列表重绘抖动

在使用ElementUI的Table组件实现自定义列数显示时,遇到表格在列显示状态切换时出现抖动的问题。通过固定td内部div的高度,成功解决了这一问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

工作中用到了elementui table 去实现列表显示数据。由于table的列数过多,产品要求可以让用户自己设置显示的列数。于是利用v-if 结合el-table-column实现了table的自定义列数显示。虽然功能实现了,但在操作某一列数据由隐藏变为显示的瞬间,页面会有抖动的现象。经过一段时间的查找,发现elementui在重新渲染table时td内部的div高度被重新计算了(div高度=table容器高度/行数),进而导致整个table的高度变化,给人的感觉table在抖动。解决的版本就是给td内部的div固定一个高度。该div有自己的class属性.el-table .cell 。重写该属性的样式表.el-table .cell{height: 20px !important;},问题得以解决。

Element UI的`el-table`中,你可以使用`render-header`和`render-cell`选项来自定义渲染,包括动态地控制某些隐藏。这里是一个基本的例子: ```html <template> <el-table :data="tableData" ref="table" border > <el-table-column prop="name" label="Name" width="180" show-header="always" <!-- 设置始终显示头部 --> ></el-table-column> <el-table-column v-for="(column, index) in visibleColumns" :key="index" :prop="column.prop" :label="column.label" :visible.sync="isColumnVisible(index)" <!-- 使用sync绑定的可见性 --> ></el-table-column> <template slot-scope="scope"> <el-table-column v-if="!scope.$parent.isColumnVisible(index)" :prop="hiddenColumn.prop" :label="hiddenColumn.label" hidden <!-- 或者直接设置hidden属性为true,这会隐藏整行而不是单 --> ></el-table-column> </template> </el-table> </template> <script> export default { data() { return { tableData: [...], visibleColumns: [], // 初始所有都可见 isColumnVisible: (index) => { // 根据需要动态设置的可见性,例如根据某个条件 // 这里是个示例,实际应用中替换为你的业务逻辑 return !['hiddenCol1', 'hiddenCol2'].includes(this.columns[index].title); }, hiddenColumn: { prop: 'hiddenProp', label: 'Hidden Column' }, // 隐藏的配置 }; }, mounted() { // 初始化可见性 this.visibleColumns = Object.keys(this.columns).map(key => ({ prop: key, label: this.columns[key] })); }, }; </script> ``` 在这个例子中,我们在`mounted`钩子初始化了所有的可见性,然后在循环中只渲染那些当前被`isColumnVisible`函数认为应显示的。如果需要隐藏特定,可以在`slot-scope`的模板里添加一个条件检查。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值