欢迎来到小懒的博客~email:568705236@qq.com

iview多个table使用相同数据源导致渲染非常慢

2020/10/27 17:12:26站长

    iview table加载100左右的数据是很顺畅,没问题的,如果超1000的数据就需要虚拟加载的表格了。一个表格加载100个数据顺畅,但是同时10个表格加载同一个100个数据的时候,就非常慢了。以下是问题代码

<Collapse accordion @on-change="chagneCollapse" v-model="openValue">
    <Panel v-for="(it,i) in pList" :key="it" :name="i.toString()">
        <div slot="content">
            <Table :columns="col1" :data="tableData"></Table>
        </div>
    </Panel>
</Collapse>

    Collapse折叠板是每个块不管是否展开都是渲染内容,因此,渲染就是同时多个表格开始渲染。因此增加设置,折叠板展开再渲染表格。

<Collapse accordion @on-change="chagneCollapse" v-model="openValue">
    <Panel v-for="(it,i) in pList" :key="it" :name="i.toString()">
        <div slot="content">
            <Table :columns="col1" :data="tableData" :if="openValue==i"></Table><!-- 增加if 让未展开部分不进行渲染 -->
        </div>
    </Panel>
</Collapse>

    当然了,如果表格数据不再变动,可以将if条件修改一下,用另外的数据存,第一次展开才渲染,折叠后不移除。这里是针对共用数据的。

赞赏