el-select中loading
时间: 2023-11-07 09:05:53 浏览: 48
在el-select中,可以通过添加loading属性来显示加载状态。当loading属性为true时,el-select会显示一个加载图标,表示正在加载选项数据。一般情况下,你可以在获取选项数据时设置loading属性为true,然后在数据获取完成后设置为false。
以下是一个示例代码:
```html
<el-select v-model="selectedValue" :loading="isLoading" @visible-change="loadOptions">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
```
```javascript
export default {
data() {
return {
selectedValue: '',
options: [],
isLoading: false
};
},
methods: {
loadOptions() {
// 设置loading状态为true
this.isLoading = true;
// 模拟异步获取选项数据
setTimeout(() => {
// 假设从服务器获取到了选项数据
this.options = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
];
// 设置loading状态为false,表示数据加载完成
this.isLoading = false;
}, 2000);
}
}
};
```
在上面的代码中,el-select组件绑定了一个isLoading属性,用来控制loading状态。在loadOptions方法中,首先设置isLoading为true,表示开始加载数据。然后使用setTimeout模拟异步获取选项数据的过程,并在获取到数据后设置isLoading为false,表示数据加载完成。