element ui 动态下拉框
时间: 2023-09-05 10:06:56 浏览: 53
Element UI 的下拉框组件 `<el-select>` 支持动态绑定选项,可以通过绑定一个数组来实现。具体操作如下:
1. 在组件的 `data` 中定义一个数组,用来存储下拉框的选项:
```javascript
data() {
return {
options: []
}
}
```
2. 在组件的 `mounted` 钩子函数中,根据实际需求获取下拉框的选项,并将其存储到 `options` 数组中:
```javascript
mounted() {
// 假设通过接口获取下拉框选项的数据
this.fetchOptions().then(res => {
this.options = res.data
})
},
methods: {
fetchOptions() {
// 发送请求获取下拉框选项的数据
}
}
```
3. 在 `<el-select>` 组件中绑定 `options` 数组,并设置 `filterable` 属性为 `true`,以支持搜索功能:
```html
<el-select v-model="selectedValue" :filterable="true">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
其中,`v-model` 绑定的是选中的值,`v-for` 循环遍历 `options` 数组,动态生成下拉框的选项。`<el-option>` 组件的 `label` 属性用来显示选项的文本,`value` 属性用来表示选项的值。