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条件修改一下,用另外的数据存,第一次展开才渲染,折叠后不移除。这里是针对共用数据的。