el-table嵌套el-select，select选项过多时页面卡顿

Question

题目描述

有一个表格用来显示颜色信息，每一行都有一个下拉选择组件，可以用来选择各种颜色（颜色数据可能有上千条）。还有一个按钮，点击按钮就新增一行。

相关代码

<el-table-column label="色号" prop="colorCode">
    <template scope="scope">
        <mc-input :readOnly="batchColorData.readOnly" :colors="colors"                 
         :obj="scope.row" attr="colorCode" attrDesc='colorName'></mc-input>
    </template>
</el-table-column>

你期待的结果是什么？实际看到的错误信息又是什么？

问题描述

mc-input 是我封装的一个el-select组件，现在的问题是页面特别卡顿，select选项多的时候会有上千条数据，当我新增一行或者点击下拉框选择颜色的时候，页面反应时间特别长。怎么才能解决页面卡顿的问题呢？

Answer 1

楼主，你好~
提供两个思路。
1，数据批量加载或者分页加载。传送门
2，页面加载的时候，数据请求异步加载（用 setTimeout() 包裹下），并渲染