el |
您所在的位置:网站首页 › table重新渲染 › el |
问题描述
el-table刷新后table出现抖动现象,而且如果使用了排序功能,点击排序后table抖动渲染后排序的选中状态图标消失了。 问题分析渲染时key使用了Math.random()导致每次都是重新渲染表头。 所以出现抖动现象。 问题解决 备注组件: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设置最大高度 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 中 }) } } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |