<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及以上版本中可用。

相关问题

<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循环

上述代码中使用了`v-for`指令来循环生成`el-option`选项。如果不想使用`v-for`循环，可以使用`computed`属性来过滤、排序、处理数据，并在模板中使用`v-if`条件渲染来生成选项。示例代码如下：

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

<script>
export default {
  // ...
  computed: {
    filteredOptions() {
      const data = this.merchandiseNameData;
      // 过滤、排序、处理数据
      const filteredData = data.filter(goods => goods.xxx === 'xxx')
                                .sort((a, b) => a.xxx - b.xxx)
                                .map(goods => { xxx });
      return filteredData;
    }
  }
}
</script>

其中，`filteredOptions`是一个计算属性，用于过滤、排序、处理数据，并返回处理后的选项数组。在模板中使用`v-if`条件渲染来检查选项数组是否为空，如果不为空，则显示`el-select`下拉框和选项。需要注意的是，上述代码只是示例，具体计算属性的实现需要根据业务需求进行修改。

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