ElementUI 的 table 内嵌 select 数据过多导致的性能问题及优化


外圆内方 2019-1-28 Vue ElementUI

问题原因及优化方案

问题原因:

  1. 产品初期没有考虑到商品数据量会有这么大,做的前端模糊查询,没用后台查询。
  2. 大量的重复 DOM 节点渲染
  3. vue 对 data 的监听

优化方案:

  1. 默认只显示 200 条数据,用户在搜索查询时使用接口插后台
  2. 通过选中商品后,把商品的遍历集合改变为只有当前一条商品的集合,这样一条商品就只有 1 个 DOM 节点
  3. 冻结对象或者不在 Data 中放入拿回来的商品数据