el-select 多选 change 事件 懒加载

对于 el-select 多选的 change 事件懒加载，可以通过监听 el-select 的 visible-change 事件，在下拉框展开时再去加载数据，避免一开始就加载所有数据导致页面卡顿。具体实现可以在 visible-change 事件中判断下拉框是否展开，如果展开则触发数据加载。

代码示例：

<el-select v-model="selectedOptions" multiple @visible-change="handleVisibleChange">
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

...

data() {
  return {
    options: [], // 所有选项数据
    selectedOptions: [], // 已选中的选项
    isDropdownVisible: false // 下拉框是否展开
  }
},
methods: {
  handleVisibleChange(visible) {
    if (visible && !this.options.length) {
      // 加载数据
      this.loadData().then(data => {
        this.options = data;
      });
    }
    this.isDropdownVisible = visible;
  },
  loadData() {
    // 异步加载数据
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]);
      }, 1000);
    });
  }
}