<template slot-scope="scope"> <el-select disabled clearable filterable v-model="scope.row.goods_id" v-if="merchandiseNameData.length > 0" :virtual-scroll="{ itemHeight: 40, approxItemCount: 50 }"> <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.texture" :value="goods.data"> </el-option> </el-select> </template>for循环导致页面卡顿

可以使用Vue.js提供的虚拟滚动技术来优化下拉框选项的渲染，避免因为数据量大导致的页面卡顿。在`el-select`元素上添加`virtual-scroll`属性即可开启虚拟滚动。示例代码如下：

<template slot-scope="scope">
  <el-select disabled clearable filterable v-model="scope.row.goods_id"
             v-if="merchandiseNameData.length > 0" :virtual-scroll="{ itemHeight: 40, approxItemCount: 50 }">
    <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.texture"
               :value="goods.data">
    </el-option>
  </el-select>
</template>

其中，`:virtual-scroll`属性绑定了一个配置对象，包含两个属性：`itemHeight`表示每个选项的高度，`approxItemCount`表示预估的选项数量。Vue.js会根据这两个参数来计算可视区域内需要渲染的选项数量，从而避免因数据量过大而导致的性能问题。需要注意的是，`virtual-scroll`属性仅在Vue.js2.6及以上版本中可用。

相关问题

<el-table-column align="center" header-align="center" property="num_min" label="商品编码"> <template slot-scope="scope"> <el-select :disabled="!infoIsDarft" clearable v-model="scope.row.goods_id"> <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.num" :value="goods.data"> </el-option> </el-select> </template> </el-table-column>仅仅做展示用如何优化

如果仅仅是做展示用，可以考虑将下拉框替换成文本展示。这样既可以避免下拉框数据过多的问题，也可以简化页面结构，提升渲染性能。可以将代码修改如下：

<el-table-column align="center" header-align="center" property="num_min" label="商品编码">
  <template slot-scope="scope">
    <span>{{ scope.row.goods_id }}</span>
  </template>
</el-table-column>

这样就将下拉框改成了简单的文本展示，不会再出现下拉框数据过多的问题。

<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 组件只会在需要时异步获取选项数据，从而提高性能，避免操作卡顿。