美文网首页UI库
element-ui中table组件动态加载数据时出现表格错乱解

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

作者: 你好岁月神偷 | 来源:发表于2021-06-12 21:58 被阅读0次

    <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

    就这样子吧!欢迎讨论~

    相关文章

      网友评论

        本文标题:element-ui中table组件动态加载数据时出现表格错乱解

        本文链接:https://www.haomeiwen.com/subject/jyxswktx.html