vue Cascader三级选择---json数据的完整代码怎么写
时间: 2024-03-20 15:38:58 浏览: 23
好的,以下是一个简单的Vue Cascader三级选择的例子,使用JSON数据:
首先,在Vue实例中定义数据:
```javascript
data() {
return {
// Cascader选项
options: [
{
label: '北京市',
value: 'beijing',
children: [
{
label: '东城区',
value: 'dongcheng'
},
{
label: '西城区',
value: 'xicheng'
},
{
label: '朝阳区',
value: 'chaoyang'
}
]
},
{
label: '上海市',
value: 'shanghai',
children: [
{
label: '黄浦区',
value: 'huangpu'
},
{
label: '徐汇区',
value: 'xuhui'
},
{
label: '长宁区',
value: 'changning'
}
]
}
],
// Cascader选择的值
selectedOptions: []
}
}
```
然后,在模板中使用`el-cascader`组件:
```html
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{ label: 'label', value: 'value', children: 'children' }"
@change="handleCascaderChange"
></el-cascader>
```
其中,`v-model`绑定选择的值,`:options`绑定选项数据,`:props`指定选项数据的属性名称,`@change`监听选择的变化并触发方法。
最后,在Vue实例中定义方法:
```javascript
methods: {
handleCascaderChange(selectedOptions) {
console.log(selectedOptions)
}
}
```
其中,`selectedOptions`为选择的值数组,在这个例子中为一个包含3个元素的数组,分别代表省、市、区的值。
完整代码如下:
```html
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{ label: 'label', value: 'value', children: 'children' }"
@change="handleCascaderChange"
></el-cascader>
</template>
<script>
export default {
data() {
return {
// Cascader选项
options: [
{
label: '北京市',
value: 'beijing',
children: [
{
label: '东城区',
value: 'dongcheng'
},
{
label: '西城区',
value: 'xicheng'
},
{
label: '朝阳区',
value: 'chaoyang'
}
]
},
{
label: '上海市',
value: 'shanghai',
children: [
{
label: '黄浦区',
value: 'huangpu'
},
{
label: '徐汇区',
value: 'xuhui'
},
{
label: '长宁区',
value: 'changning'
}
]
}
],
// Cascader选择的值
selectedOptions: []
}
},
methods: {
handleCascaderChange(selectedOptions) {
console.log(selectedOptions)
}
}
}
</script>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)