<el-table-column width="190" align="center" header-align="center" property="" label="商品"> <template slot-scope="scope"> <el-select clearable filterable v-model.lazy="scope.row.goods_id"> <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.value" :value="goods.data"> </el-option> </el-select> </template> </el-table-column>使用分段加载

好的，那我们来看一下如何在这个 el-select 组件中实现分段加载。

首先，我们需要在 data 中定义一个变量来保存选项数据，例如：

data() {
  return {
    // 定义一个变量来保存选项数据
    options: []
  }
}

然后，我们可以通过监听 el-select 的 visible-change 事件，在事件处理函数中判断下拉框是否展开，如果展开则进行数据加载，同时注意进行数据缓存。具体实现代码如下：

<el-select clearable filterable v-model.lazy="scope.row.goods_id" @visible-change="handleVisibleChange">
  <el-option v-for="goods in options" :key="goods.data" :label="goods.value" :value="goods.data"></el-option>
</el-select>

...

methods: {
  handleVisibleChange(visible) {
    if (visible && !this.options.length) { // 判断下拉框是否展开，并且选项数据是否已经加载
      // 进行数据加载，例如通过 axios 发送请求获取数据
      axios.get('/api/options').then(res => {
        this.options = res.data // 将获取的数据保存到选项数据中
      })
    }
  }
}

需要注意的是，在数据加载过程中，可以通过在 el-select 组件中添加 loading 属性来显示加载状态，提升用户体验。例如：

<el-select clearable filterable v-model.lazy="scope.row.goods_id" :loading="options.length === 0" @visible-change="handleVisibleChange">

另外，分段加载也需要考虑性能问题，如果数据量较小，一次性加载所有数据也不会导致性能问题，此时可以直接加载所有数据。