＜el-select＞ :remote-method用法

说明

在 Vue.js 中， 是 Element UI 库提供的一个下拉选择框组件。:remote-method 是 组件的一个属性，用于指定一个远程方法，该方法将在用户输入时被调用，以获取下拉列表的选项数据。
使用 :remote-method，你需要在 Vue 实例中定义一个方法，该方法将接收用户输入的关键词作为参数，并返回一个 Promise 对象，该 Promise 对象解析为包含选项数据的数组。

代码实现

单选

<template>
  <div>
    <el-select v-model="selectedOption" placeholder="请选择" :remote-method="loadOptions" :loading="isLoading">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null,
      options: [],
      isLoading: false
    };
  },
  methods: {
    loadOptions(query) {
      this.isLoading = true;
      // 在这里实现远程方法，返回一个 Promise 对象
      return new Promise((resolve, reject) => {
        // 模拟异步请求，这里应该是调用后端 API 获取数据
        setTimeout(() => {
          // 假设后端返回的数据格式为 { options: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }] }
          const response = {
            options: [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' }
            ]
          };
          resolve(response.options);
          this.isLoading = false;
        }, 1000);
      });
    }
  }
};
</script>

多选

实现多选功能，可以将 组件的 multiple 属性设置为 true，由于 multiple 属性被设置为 true，用户可以选择多个选项，selectedOptions 将会是一个数组，包含了所有被选中的选项的 value。

<template>
  <div>
    <el-select v-model="selectedOption" placeholder="请选择" :remote-method="loadOptions" :loading="isLoading" multiple>
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: [],
      options: [],
      isLoading: false
    };
  },
  methods: {
    loadOptions(query) {
      this.isLoading = true;
      // 在这里实现远程方法，返回一个 Promise 对象
      return new Promise((resolve, reject) => {
        // 模拟异步请求，这里应该是调用后端 API 获取数据
        setTimeout(() => {
          // 假设后端返回的数据格式为 { options: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }] }
          const response = {
            options: [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' }
            ]
          };
          resolve(response.options);
          this.isLoading = false;
        }, 1000);
      });
    }
  }
};