您现在的位置是：网站首页> 编程资料编程资料

vue3如何使用vant-picker封装省市二级联动_vue.js_

2023-05-24 433人已围观

简介 vue3如何使用vant-picker封装省市二级联动_vue.js_

怕什么真理无穷，进一步有进一步的欢喜呀，不得不承认的就是，兴趣和擅长是一个良性迭代的循环啊，你擅长某件事情，就会越喜欢它，越喜欢，就越愿意花时间，进而越擅长。所以代码码起来吧哈哈哈

近期用上了vue3，还顺手写了个小需求，用vant-picker封装一个省市的二级联动，并且在从后端接口获取省市的数据，点开弹出框需要展示默认的选项，比如点击广东省-深圳市输入框，弹出的picker级联选择器需要默认广东 -深圳。

如下图：

在这里插入图片描述

好，那么话不多说，接下来一步一步来实现。

首先，项目中引入vant-ui

import { Popup, Picker } from 'vant' components: { [Picker.name]: Picker, [Popup.name]: Popup, },

vant官网中，地区联动的形式是这样的

在这里插入图片描述

而我的数据格式是这样的

[ { "citys": [ { "cityName": "北京市" } ], "provinceName": "北京市" }, { "citys": [ { "cityName": "天津市" } ], "provinceName": "天津市" }, { "citys": [ { "cityName": "上海市" } ], "provinceName": "上海市" }, { "citys": [ { "cityName": "重庆市" } ], "provinceName": "重庆市" },]

然后对数据做了处理，处理成官网的形式，这样就可以联动了

 const columnsData = chinaAreaDataType.map((item, index) => { const children: { text: string }[] = [] item.citys.forEach((item) => { children.push({ text: item.cityName, }) }) return { text: item.provinceName, children } })

其中关于一些vue3父子组件的传值就不过多赘述了，有需要可自行查看官方文档

接下来说一说，点开弹出框需要展示默认的选项怎么实现的吧，此处，vant官网给出了一个api，不过没有使用示例，捣鼓了半天。

在这里插入图片描述

使用setIndexes设置获取到的索引值，就可以实现点开弹出框需要展示默认的选项了，在onMounted中通过ref去设置相应的索引即可。

onMounted(() => { const cityName = toRef(props, 'areaValue').value.split('-') const findProvinceName = columnsData.findIndex((value) => value.text === cityName[0]) const findCityName = columnsData[findProvinceName].children.findIndex((value) => value.text === cityName[1]) areaPicker.value?.setIndexes([findProvinceName, findCityName]) })

你以为这样就结束了吗，no no no,还要在popup 中设置lazy-render为false，这样就结束拉~

好吧废话不多说，上子组件代码 

子组件代码PickerArea