el-table刷新后table出现抖动现象&table表格高度计算
2023-09-11 14:15:07 时间
问题描述
el-table刷新后table出现抖动现象,而且如果使用了排序功能,点击排序后table抖动渲染后排序的选中状态图标消失了。
问题分析
<el-table-column
:key="index + Math.random()" // 注意!!!
>
渲染时key使用了Math.random()
导致每次都是重新渲染表头。
所以出现抖动现象。
问题解决
<el-table-column
:key="'t3' + index" // 这里写成一个固定的值就不会出现刷新数据抖动了
>
备注
组件:element-ui el-table
问题描述:勾选批量选择框、切换tab、输入查询条件时,table表格出现抖动,体验极差。
原因:切换不同的tab,需要增减(显隐)不同的列,所以用v-if来控制,当增减较多列时,用v-if控制的列出现渲染不正确问题。然后发现给v-if的列绑定 key 就可以正常渲染了,一开始这样写 :key="Math.random()",开始出现上面所描述的table表格抖动闪动问题。花了较长时间去寻找解决办法,一直无果,最后发现给 key 绑定确定的值,例如 :key="1",:key="2" ,抖动现象就没了......
总结:用 v-if 控制增减 table 的列,有时会出现渲染不对问题,可以通过给这些列绑定key以正确渲染,例如 :key="1"。踩的坑是写成 :key="Math.random()",导致出现table抖动问题
el-table设置最大高度
<el-table ref="tableRef" :data="data" :max-height="tableHeight"></el-table>
<script>
export default {
data() {
return {
tableHeight: 0
}
},
mounted() {
this.$nextTick(() => {
this.tableHeight = window.innerHeight - 50;
//后面的50:根据需求空出的高度,自行调整
// this.$refs.element.offsetHeight // 获取高度值 (内容高+padding+边框)
// window.getComputedStyle(this.$refs.element).height // 获取元素样式值 (存在单位)
// this.$refs.element.style.height // 获取元素内联样式值(非内联样式无法获取)
// this.$refs.element.$el.offsetHeight // 可以放在 nextTick 中
})
}
}
</script>
相关文章
- CentOS报错:Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&i
- Python && JAVA 去除字符串中空格的五种方法
- type cast & escape
- /etc/hosts.allow & /etc/hosts.deny
- C语言计算时间函数 & 理解linux time命令的输出中“real”“user”“sys”的真正含义
- 《C++ AMP:用Visual C++加速大规模并行计算》——3.7 使用restrict(amp)标记的函数
- 「基于Django的全民健康智慧中医数字服务平台」产品设计&技术应用
- Vue&Cesium&Ribbon界面: 将桌面GIS搬进浏览器
- docker命令:docker-stack相关操作、使用 inspect 命令查看镜像详细信息、docker rm & docker rmi & docker prune 清理删除镜像的差异
- sequelize Getters, Setters & Virtuals - 获取器, 设置器 & 虚拟字段
- AT&T:开源是打赢竞争的最佳方式
- AT&T发布年内5G测试计划
- AT&T和三星加入5GAA 进军联网汽车市场
- 学习笔记(05):Python网络编程&并发编程-基于socket实现简单套接字通信