ElementUI表格列错位问题
现象：
现象
在开发后台管理项⽬中不⽌⼀次碰见过elementUI表格错位问题。如下图所⽰
多少度
表格出现问题的共同点有：
1.通过复选框的选中与否来控制表格中的⼀些列是展⽰还是隐藏
2.有固定的列
3.有横向滚动条
4.表格⾼度动态控制
解决⽅案：
解决⽅案也是多种尝试后才出来的，试过el-table-column 加 key；也试过动态隐藏展⽰的列由v-if改为v-show，多级表格时修改嵌套关系等等都不⾏。
最后发现el-table 也动态控制展⽰与隐藏式是可以解决错乱问题的，于是在el-table上加上了v-if，如下代码所⽰：
<el-table
v-if="!loading.table"
element表格横向滚动条v-if="!loading.table"
ref="table"
ref="table"
v-loading="loading.table"
:height="tableHeight"
:data="tableData"
:default-sort="{ prop: 'date', order: 'descending' }"
:summary-method="getSummaries"
show-summary
@sort-change="hanleSort"
>.........</el-table>
这样虽然可以解决表格错乱问题，但是会有另外⼀个现象就是，每次请求接⼝后，表格区域会闪烁⼀下，体验不是很好。
⼜想 v-if 其实就是重新渲染表格⽽已。最后发现elementUI官⽹中有⼀个⽅法，如下图所⽰：
所以拿到数据请求结果后，使⽤element table doLayout⽅法进⾏强制重新渲染，如下代码：
this.$nextTick(() => {
doLayout()
this.$refs.table.doLayout
})
Element 2.0.5 已发布，开放 Table 的 doLayout ⽅法，⽤于重新计算 Table 的布局，所以⼤于这个版本的，都可以使⽤doLayout⽅法。很友好的解决了表格错乱问题，困扰很久后发现还是多看看官⽹API吧，这样有利于你我他~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。