使用element ui 中的 table组件时 ,异步加载数据,然后渲染上去时会出现td与th对不齐,但是重新重新进一次就有又好了,但是对于用户体验肯定是不行的。
这个时候只需要使用element ui 里的内置方法doLayout重新加载一下table就好了
解决方法
<el-table ref="multipleTable" :data="tableData"></el-table>
// 1.监听table 绑定的数据
watch: {
tableData: {
handler() {
this.$nextTick(() => {
this.$refs.multipleTable.doLayout();
});
},
deep: true,
immediate: true,
},
},
// 2.调用接口获取数据后使用
getTableData().then(res={
this.tableData = res.data
this.$nextTick(() => {
this.$refs.multipleTable.doLayout();
});
})