地理大区选择区域

绳墨

于 2024-05-11 09:57:50 发布

阅读量664

点赞数 29

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_42253142/article/details/138701211

版权

本文介绍了基于Vue3和ElementPlus开发的中国地理大区选择器，详细讲解了如何实现根据地区大区显示省份，处理全选和非全选的显示及数据传输，以及优化卡顿问题和数据处理，包括全选、编辑、去重等功能。

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

基于vue3+elementplus的一个根据中国地区大区分区的选择器,效果图如下,需求说实话还是挺合(bian)理(tai)的

需求如下

根据中国地理大区划分显示对应的省份
如果选择了广东省,那就代表着选择了这个省下面的所有市,所有区,但是发请求的时候不要传,说是为了减少请求的数据量,举例说明,界面中勾选了广东省,保存之后,在表格中看到的数据就只有广东省,但是如果展开广东省下面的市级,包括区级,都是全选中的状态,但是如果去掉一个区,也就是不是全选的情况下,那展示的时候就要变成广东省-广州市-天河区…全部一一展开
因为业务是电商的指定配送区域,并且设置快递费用,所以需要去重,就是上一条数据选择过了广东省,那就不能再选择广东省了,如果整个华北被选择过了,也需要在新增的时候不显示整个华北区域

需求明确之后,那就是一步一步的去实现了

1,根据中国地理大区划分显示对应的省份

这个数据我感觉也是应该是一个树状的数据结构的,我找了一下,发现并没有发现现成的JSON数据,所以也只能通过一个通用的省市区JSON数据,然后通过node写一个脚本来实现了,脚本如下,也相对简单


const fs = require('fs');

// 读取省市区数据的 JSON 文件
fs.readFile('./pca-code.json', 'utf8', (err, jsonString) => {
   
  if (err) {
   
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
   
    // 解析 JSON 数据
    const jsonData = JSON.parse(jsonString);

    let data = [
      {
   
        name:'东北',
        code:-1,
        includeProvinces:['辽宁省','吉林省','黑龙江省'],
        children:[]
      },
      {
   
        name:'华北',
        code:-2,
        includeProvinces:['北京市','天津市','河北省','山西省','内蒙古自治区'],
        children:[]
      },
      {
   
        name:'华东',
        code:-3,
        includeProvinces:['上海市','江苏省','浙江省','安徽省','福建省','江西省','山东省'],
        children:[]
      },
      {
   
        name:'华南',
        code:-3,
        includeProvinces:['广东省','广西壮族自治区','海南省'],
        children:[]
      },
      {
   
        name:'华中',
        code:-4,
        includeProvinces:['河南省','湖北省','湖南省'],
        children:[]
      },
      {
   
        name:'西南',
        code:-5,
        includeProvinces:['重庆市','四川省','贵州省','云南省','西藏自治区'],
        children:[]
      },
      {
   
        name:'西北',
        code:-6,
        includeProvinces:['陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
        children:[]
      },
      {
   
        name:'港澳台',
        code:-7,
        includeProvinces:['台湾省','香港特别行政区','澳门特别行政区'],
        children:[]
      },
    ]



    let result = {
   };


    data.map(t=>{
   
      let provinces = t.includeProvinces;
      jsonData.map((t2,index)=>{
   
        if(provinces.includes(t2.name)){
   
          t.children.push(t2)
        }
      })
    })


    // 将结果转换为 JSON 字符串并输出
    const resultJsonString = JSON.stringify(da