Vue Vant Cascader控件 三级城市数据

在使用Vant 里的Cascader控件做三级城市列表的时候,以前的数据过时了,在网上找了很久的数据,都不是我想要的格式。我想要的是以下格式:

本想着偷懒直接找现成的,后来实在找不到。不过找到了这个库

GitHub - JasonBoy/china-location: 🇨🇳JS Library for Chinese Administrative Division. 中国行政区划信息-区划代码数据库(GB/T 2260)🇨🇳JS Library for Chinese Administrative Division. 中国行政区划信息-区划代码数据库(GB/T 2260) - GitHub - JasonBoy/china-location: 🇨🇳JS Library for Chinese Administrative Division. 中国行政区划信息-区划代码数据库(GB/T 2260)https://github.com/JasonBoy/china-location 这个库可以将

https://github.com/mumuy/data_location  里的数据格式化成这种格式

 该格式源文件:https://github.com/JasonBoy/china-location/blob/master/dist/location.json

之后我修改了该项目,成功输出了我想要的格式了。在此记录下

我的格式文件:https://github.com/wbb631094818/china-location/blob/master/dist/location.json

在此感谢

https://github.com/mumuy/data_location  提供数据
GitHub - JasonBoy/china-location: 🇨🇳JS Library for Chinese Administrative Division. 中国行政区划信息-区划代码数据库(GB/T 2260)

提供方法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的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> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值