mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
16 lines
1.4 KiB
Vue
16 lines
1.4 KiB
Vue
<template>
|
||
<div>
|
||
<p class="red">问题现象：当表格数据量较大时，单元格输入卡顿（输入框比较严重，输入后明显感觉会卡顿一会）</p>
|
||
<p>Vue 响应机制：双向绑定对于非数组类型的数据是非常友好的；但对于数组就没那么友好了，特别是数据量大的数组，只要列表中有 input 去修改某个值，就会重新执行 render 函数，这时运算量取决于数据的大小，数组越大，执行越久，卡顿时间也就越久。</p>
|
||
<p class="red">问题所在：由 input 输入改变数组中的值导致 Vue 的 render 频繁执行产生短暂卡顿</p>
|
||
<p>优化方案1：如果数据量超大 200+ 条，通过<router-link class="link" :to="{name: 'TableScroll'}">虚拟滚动方式</router-link>按需加载，比如将数组拆分成可视区 100 条；由于数量的减少所以即使 render 函数执行得再频繁也是很快的</p>
|
||
<p>优化方案2：如果数据量 200 条以下，单元格输入框不要使用任何组件（特别是 v-model ），应该使用原生的输入框，配合<router-link class="link" :to="{name: 'RendererAPI'}">渲染器</router-link>实现，将 input 事件改成 change 事件，避免 render 函数频繁执行。这样就可以使输入框很流畅了</p>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
p {
|
||
font-size: 16px;
|
||
}
|
||
</style>
|