使用vant框架写一个省市区选择的功能-小龙资源网

📌 温馨提示：
本文内容可能随时间变动而失效，请以页面显示的更新时间为准。
若内容已不准确或资源失效，欢迎留言或联系站长反馈修正。

⚠️ 免责声明：
本文仅供学习与参考，观点仅代表作者个人意见，与本站无关。
如有侵权问题，请立即联系我们处理，谢谢理解与支持。

下面是一个使用 Vant 框架实现省市区选择功能的示例代码，Vant 框架提供了 van-area 组件专门用于实现省市区选择。

代码示例

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>省市区选择</title>
  <!-- 引入 Vant 的 CSS 文件 -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" />
  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
  <script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
</head>

<body>
  <div id="app">
    <!-- 显示已选择的省市区信息 -->
    <van-field
      v-model="area"
      readonly
      clickable
      label="省市区"
      placeholder="请选择省市区"
      @click="showAreaPicker = true"
    />
    <!-- 省市区选择器组件 -->
    <van-area
      v-model:show="showAreaPicker"
      @confirm="onConfirm"
      @cancel="showAreaPicker = false"
    />
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          area: '', // 存储选择的省市区信息
          showAreaPicker: false // 控制省市区选择器的显示与隐藏
        };
      },
      methods: {
        // 确认选择省市区后的回调函数
        onConfirm(values) {
          // 将选择的省市区信息拼接成字符串
          this.area = values.map(item => item.name).join(' ');
          this.showAreaPicker = false; // 隐藏选择器
        }
      }
    });
    app.use(vant);
    app.use(vant.Lazyload);
    app.mount('#app');
  </script>
</body>

</html>

代码解释

HTML 部分：
- <van-field>：用于显示已选择的省市区信息，设置为只读且可点击，点击后会显示省市区选择器。
- <van-area>：Vant 提供的省市区选择器组件，通过 v-model:show 控制其显示与隐藏，@confirm 事件监听选择确认操作，@cancel 事件监听取消操作。
JavaScript 部分：
- data 中定义了两个变量：
  - area：用于存储用户选择的省市区信息。
  - showAreaPicker：用于控制省市区选择器的显示与隐藏。
- methods 中定义了 onConfirm 方法：
  - 当用户确认选择后，将选择的省市区信息拼接成字符串并赋值给 area。
  - 隐藏省市区选择器。

注意事项

确保引入的 Vue 和 Vant 版本兼容，避免出现兼容性问题。
可以根据实际需求对 van-field 和 van-area 组件的属性进行调整，以满足不同的业务需求。

你可以使用 JavaScript 来实现将原始的嵌套 JSON 数据转换为指定格式的对象。以下是实现该转换的代码：

const originalData = [
    {
        "code": "110000",
        "name": "北京市",
        "level": 1,
        "parentCode": "",
        "childrenList": [
            {
                "code": "110100",
                "name": "北京市",
                "level": 2,
                "parentCode": "110000",
                "childrenList": [
                    {
                        "code": "110101",
                        "name": "东城区",
                        "level": 3,
                        "parentCode": "110100",
                        "childrenList": null
                    },
                    {
                        "code": "110102",
                        "name": "西城区",
                        "level": 3,
                        "parentCode": "110100",
                        "childrenList": null
                    }
                ]
            }
        ]
    },
    {
        "code": "120000",
        "name": "天津市",
        "level": 1,
        "parentCode": "",
        "childrenList": [
            {
                "code": "120100",
                "name": "天津市",
                "level": 2,
                "parentCode": "120000",
                "childrenList": [
                    {
                        "code": "120101",
                        "name": "和平区",
                        "level": 3,
                        "parentCode": "120100",
                        "childrenList": null
                    },
                    {
                        "code": "120102",
                        "name": "河东区",
                        "level": 3,
                        "parentCode": "120100",
                        "childrenList": null
                    }
                ]
            }
        ]
    }
];

function convertData(data) {
    const province_list = {};
    const city_list = {};
    const county_list = {};

    data.forEach(province => {
        province_list[province.code] = province.name;
        if (province.childrenList) {
            province.childrenList.forEach(city => {
                city_list[city.code] = city.name;
                if (city.childrenList) {
                    city.childrenList.forEach(county => {
                        county_list[county.code] = county.name;
                    });
                }
            });
        }
    });

    return {
        province_list,
        city_list,
        county_list
    };
}

const convertedData = convertData(originalData);
console.log(convertedData);

代码解释：

定义目标对象：首先定义了三个空对象 province_list、city_list 和 county_list，用于存储转换后的数据。
遍历原始数据：使用 forEach 方法遍历原始数据中的每个省份对象。
- 省份数据：将省份的 code 作为键，name 作为值，存储到 province_list 中。
- 城市数据：如果省份对象有 childrenList，则遍历其中的每个城市对象，将城市的 code 作为键，name 作为值，存储到 city_list 中。
- 区县数据：如果城市对象有 childrenList，则遍历其中的每个区县对象，将区县的 code 作为键，name 作为值，存储到 county_list 中。
返回转换后的数据：将三个对象封装到一个新对象中并返回。