ele table 循环渲染ele select 页面超级卡顿

Question

如题

代码如下

<el-table-column
                prop="task"
                fixed
                label="任务"
                width="150"
        >
            <template slot-scope="scope">

                <el-tooltip content="已核销" placement="bottom" effect="light"
                            :disabled="scope.row.approvalState == 'agree'?false:true">

                    <el-select v-model="scope.row.task"
                               clearable
                               placeholder="请选择" size="mini"
                               :disabled="scope.row.approvalState == 'agree'?true:false">
                        <el-option v-for="item in scope.row.Tasks" :key="item.label"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-tooltip>

            </template>

        </el-table-column>

Answer 1

你这是想直接在当前行执行编辑操作？
要不然就不要这种行编辑行操作，要不然就稍微优化一下，例如：
动态分页，减少行数；
减少嵌套，去掉tooptip；
当select为disable的时候没必要循环option，反正也不能点击，或者直接用input；
task如果相同也可延迟加载下拉

Answer 2

<el-select v-model="defaultvalueItem.dest" class="captive-mix-select" @change="changeAuthSelect(index, indexRow)" ref="selectItem">

                            <el-option v-for="val in destValues" :key="val.value" :value="val.value" :label="$t(description + val.key)"></el-option>
                        </el-select>

我也遇到了同样同样问题 destValues 为4个，但是el-select 外面也是个循环；所以可能有多条 el-select

就有点慢；请问你有优化的方法吗 如果用el-input-number 能不能贴下你的代码

Answer 3

我用el-input-number代替了 el-select 卡顿明显减少了。 还要我帖代码不？