mint-ui picker 实现省市区县三级联动

最新推荐文章于 2024-10-18 14:05:27 发布

心若向阳无谓悲伤

最新推荐文章于 2024-10-18 14:05:27 发布

阅读量2.6k

点赞数 4

本文链接：https://blog.csdn.net/qq_31490071/article/details/87461288

版权

本文介绍了如何使用mint-ui的picker组件实现省市区县三级联动的效果，详细阐述了实现思路和遇到的问题，包括数据存储、picker赋值及动态更新。在实施过程中遇到的选择项数据不刷新问题，作者提供了监听数据变化并强制重定位选中数据的解决办法。

摘要由CSDN通过智能技术生成

实现效果：

首先说一下实现思路：

1.采用单独的js文件存储省市区数据，可以是json或者js文件，数据可参考我的上一篇博客。

2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。

3.最好采用单独的组件实现，方便修改和复用。

代码：

<template>
  <div class="location_container">
    <mt-picker :slots="myAddressSlots" @change="onAddressChange"></mt-picker>
  </div>
</template>

<script>
  import {city, privinceList, cityList, districtList} from '../../assets/province_data'  
  //引入省市区数据,数据内容在上一条博客中
    export default {
        name: "LocationPicker",
        data() {
            return {
              myprivinceList: