element-ui中table组件动态加载数据时出现表格错乱解决方案

<el-table :data="tableData" border ref="table" >

    <el-table-column v-for="(item,index) in titleList" :prop="item.prop" :label="item.label" :key="index + Math.random() " align=center header-align="center"></el-table-column>

</el-table>

问题：
    在vue项目中使用element-ui组件，在使用table时，在选择不同的条件时，需要发送网络请求，将返回的数据渲染在表格中，其中表头和表的数据都需要更新。

解决办法：

        通过在组件的updated生命周期中使用this.$refs['table'].doLayout()重新渲染表格解决问题。（个人觉得问题是表格要重新渲染，需要在组件数据完成更新后执行。）

代码传送门（codepen）:https://codepen.io/enjoykai/pen/bGWarVp

就这样子吧！欢迎讨论~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容