vue 利用element-ui 做一个form表单里的输入框下拉选择 下拉选择还可以再下拉
时间: 2024-04-13 19:01:55 浏览: 214
在 Element UI 中,你可以使用 `el-select` 组件的 `el-option-group` 子组件来实现输入框下拉选择中的多级联动下拉选择。以下是一个示例代码:
```html
<template>
<el-form>
<el-form-item label="选择地区">
<el-select v-model="selectedRegion" placeholder="请选择地区">
<el-option-group
v-for="province in provinces"
:key="province.label"
:label="province.label"
>
<el-option
v-for="city in province.options"
:key="city.label"
:label="city.label"
:value="city.value"
>
<el-option-group
v-for="district in city.options"
:key="district.label"
:label="district.label"
>
<el-option
v-for="subDistrict in district.options"
:key="subDistrict.value"
:label="subDistrict.label"
:value="subDistrict.value"
></el-option>
</el-option-group>
</el-option>
</el-option-group>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
selectedRegion: '',
provinces: [
{
label: '北京',
options: [
{
label: '市辖区',
value: '110100',
options: [
{ label: '东城区', value: '110101' },
{ label: '西城区', value: '110102' },
// 其他区域
]
},
// 其他城市
]
},
// 其他省份
]
};
}
};
</script>
```
在上面的示例中,我们使用了 `el-select` 和 `el-option` 组件来实现下拉选择。通过使用 `el-option-group` 组件,我们可以创建多级联动的下拉选择。
在 `data` 中,我们定义了 `selectedRegion` 变量来存储用户选择的地区。`provinces` 数组表示省份和城市的层级关系,每个省份都对应一个选项组,每个城市又对应一个选项组,以此类推。
你可以根据自己的需求调整示例代码,并根据 Element UI 的文档了解更多关于 Select 组件和表单的用法。
阅读全文