<el-table-column v-else align="center" header-align="center" property="supplier_name" label="供应商"> <template slot-scope="scope"> <el-select :disabled="!infoIsDarft" filterable clearable v-model="scope.row.supplier_id"> <el-option v-for="sup in supList" :key="sup.supplier_id" :label="sup.supplier_name" :value="sup.supplier_id"> </el-option> </el-select> </template> </el-table-column>操作卡顿

这段代码中的 el-select 组件也是在 el-table-column 组件的 slot 中进行渲染的，如果在表格中存在大量数据时，会导致渲染变慢，从而导致操作卡顿。

除了使用虚拟滚动优化 el-select 组件的性能之外，还可以考虑异步加载选项来优化 el-select 组件的性能。具体做法是，在 el-select 组件中添加一个 remote 属性，并设置它的 remote-method 属性，如下所示：

<el-select :disabled="!infoIsDarft" filterable clearable v-model="scope.row.supplier_id" v-else :remote="true" :remote-method="getOptions">
    <el-option v-for="sup in supList" :key="sup.supplier_id" :label="sup.supplier_name" :value="sup.supplier_id">
    </el-option>
</el-select>

其中，remote 属性表示是否使用远程搜索，remote-method 属性表示异步获取选项的方法。

在组件的 methods 中定义 getOptions 方法，用于异步获取选项，如下所示：

methods: {
    async getOptions(query) {
        // 根据查询条件异步获取选项数据
        const options = await fetchOptions(query);
        // 将选项数据设置到组件的 options 属性中
        this.options = options;
    }
}

在 getOptions 方法中，可以根据查询条件异步获取选项数据，并将选项数据设置到组件的 options 属性中。

使用异步加载选项后，el-select 组件只会在需要时异步获取选项数据，从而提高性能，避免操作卡顿。