＜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-optionv-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-optionv-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);});}}
};