问题: 表格存在错位 表头表格内部未对齐(如图)
解决:
① 方法1
给表格加上key 确保表渲染的唯一性
(new Date().getTime(),Math.random()) 时间戳 随机数 唯一值给key
<el-table
:data="tableData"
:key='Math.random()'
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
</el-table>
②方法2
element 官方给出的解决办法是使用doLayout
<el-table
:data="tableData"
ref='table'
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
</el-table>
使用doLayout重新加载一下table就好了
watch:{
tableData:{
deep:true,
handler:function(){
this.$nextTick(() => {
this.$refs.table.doLayout()
})
}
}
}
如果使用doLayout 有固定列还是存在上下错位(固定列相连的字段建议不要给width),滚动条的影响,请尝试下面css
::v-deep.el-table .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body {
padding-bottom: 10px!important;
}