el-select省市区三级联动
时间: 2023-10-31 19:55:01 浏览: 102
对于el-select省市区三级联动,你可以使用el-cascader组件来实现。下面是一个简单的示例代码:
```html
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
placeholder="请选择省市区"
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: '北京市',
label: '北京市',
children: [
{
value: '东城区',
label: '东城区'
},
{
value: '西城区',
label: '西城区'
},
// 其他区县...
]
},
{
value: '上海市',
label: '上海市',
children: [
{
value: '黄浦区',
label: '黄浦区'
},
{
value: '徐汇区',
label: '徐汇区'
},
// 其他区县...
]
},
// 其他省市...
]
};
}
};
</script>
```
以上代码中的`options`数组表示省市区的数据,每个选项对象包含`value`和`label`属性,分别表示选项的值和显示文本。如果有下一级子选项,可以在对象中添加`children`属性,并在子选项对象中同样定义`value`和`label`属性。
使用`v-model`来绑定选中的值,它会自动跟踪用户的选择。你可以在`selectedOptions`中获取选中的省市区信息。
这只是一个简单的示例,你可以根据实际需求,动态生成省市区数据,并进行相关的联动逻辑处理。
阅读全文