大数据实训报告_教学大数据实训平台解决方案_德拓信息_上海市徐汇区

Vue 实现三级联动组件有很多种方式,以下是一种常见的实现方式: 1. 创建一个 Vue 组件,包含三个下拉框,分别用于选择省、市、区。 2. 在组件中定义数据源,可以使用 JSON 格式,例如: ``` data() { return { provinces: [ { id: 1, name: '北京市' }, { id: 2, name: '上海市' }, { id: 3, name: '广东省' } ], cities: [ { id: 1, name: '北京市', parentId: 1 }, { id: 2, name: '上海市', parentId: 2 }, { id: 3, name: '广州市', parentId: 3 }, { id: 4, name: '深圳市', parentId: 3 } ], areas: [ { id: 1, name: '东城区', parentId: 1 }, { id: 2, name: '西城区', parentId: 1 }, { id: 3, name: '黄浦区', parentId: 2 }, { id: 4, name: '徐汇区', parentId: 2 }, { id: 5, name: '天河区', parentId: 3 }, { id: 6, name: '番禺区', parentId: 3 }, { id: 7, name: '南山区', parentId: 4 }, { id: 8, name: '福田区', parentId: 4 } ], selectedProvince: '', selectedCity: '', selectedArea: '' } } ``` 其中,`provinces` 数组保存所有的省份信息,`cities` 数组保存所有的城市信息,`areas` 数组保存所有的区县信息。 3. 绑定下拉框的选项值和显示文本: ``` <select v-model="selectedProvince"> <option value="">请选择省份</option> <option v-for="province in provinces" :value="province.id">{{ province.name }}</option> </select> <select v-model="selectedCity" :disabled="!selectedProvince"> <option value="">请选择城市</option> <option v-for="city in cities.filter(city => city.parentId == selectedProvince)" :value="city.id">{{ city.name }}</option> </select> <select v-model="selectedArea" :disabled="!selectedCity"> <option value="">请选择区县</option> <option v-for="area in areas.filter(area => area.parentId == selectedCity)" :value="area.id">{{ area.name }}</option> </select> ``` 在第二个和第三个下拉框中,通过 `:disabled` 属性来控制选项是否可用,当上级下拉框没有选择时,下级下拉框将被禁用。 4. 监听下拉框选项的变化,并更新选中的数据: ``` watch: { selectedProvince: function(val) { this.selectedCity = ''; this.selectedArea = ''; }, selectedCity: function(val) { this.selectedArea = ''; } } ``` 当选择的省份发生变化时,清空已选中的城市和区县;当选择的城市发生变化时,清空已选中的区县。 这样,一个简单的省市区三级联动组件就完成了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值