封装组件——regionArea行政区域级联下拉（vue+element）

最新推荐文章于 2023-10-31 13:40:09 发布

爱吃松果的美美

最新推荐文章于 2023-10-31 13:40:09 发布

阅读量305

点赞数

分类专栏：封装组件文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_37877794/article/details/116567368

版权

封装组件专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<template>
  <div v-if="!disabled">
    <el-cascader :options="cityList"
                 :size="size"
                 :style="myStyle"
                 :props="{
        checkStrictly: checkStrictly,
        label: 'region_name',
        children: 'children',
        value: 'region_code'
      }"
                 @change="select"
                 v-model="codeArr"
                 :changeOnSelect="changeOnSelect"
                 :placeholder="placeholder"
                 :clearable="clearable"></el-cascader>
  </div>
  <div v-else>
    <el-cascader :options="cityList"
                 :props="{
        label: 'region_name',
        children: 'children',
        value: 'region_code'
      }"
                 v-model="codeArr"
                 disabled
                 :style="myStyle">
    </el-cascader>
  </div>
</template>
<script type="text/javascript">
import { listToTreeList } from "@/plugins/common";
import { regionList, findFullNameByRegionCode } from "@/assets/region.js";

export default {
  name: "RegionArea",
  model: {
    prop: "selectCode",
    event: "select"
  },
  props: {
    tile: {
      type: Boolean,
      default: false
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    hasSelf: {
      type: Boolean,
      default: false
    },
    changeOnSelect: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ""
    },
    selectCode: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    root: {
      type: String,
      default: null
    },
    isShowName: {
      type: Boolean,
      default: false
    },
    myStyle: {
      type: String,
      default: "width:100%"
    },
    showLength: {
      type: Number,
      default: 4
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cityList: [],
      codeArr: "",
      showName: ""
    };
  },
  methods: {
    select: function(val) {
      var ret = "";
      if (val.length > 0) {
        ret = val[val.length - 1];
      }

      if (this.isShowName) {
        let showName = findFullNameByRegionCode(ret);
        this.$emit("select", showName.replace(/ \/ /g, ""));
        this.$emit("change", showName.replace(/ \/ /g, ""));
      } else {
        this.$emit("select", ret);
        this.$emit("change", ret);
      }

      this.$emit("clearValidate");
    },
    reloadFinish: function() {
      if (this.isShowName) {
        return;
      }
      if (!this.$isNullOrEmpty(this.selectCode)) {
        // this.selectCode = this.selectCode.substring(0, 9) + "000";
        // let codeArr = [...new Set(findRegionCodeArr(this.selectCode))];
        // let idx = codeArr.findIndex(r => r == this.MyToot);
        // if (idx > -1) {
        //   codeArr.splice(idx, 1);
        // }
        this.$set(this, "codeArr", this.selectCode);
      }

      this.showName = findFullNameByRegionCode(this.selectCode);
    }
  },
  watch: {
    selectCode: function() {
      this.reloadFinish();
    }
  },
  mounted: function() {
    var root = this.root;
    if (this.$store.getters.regionCode && this.root == null) {
      root = this.$store.getters.regionCode.substring(0, 4) + "00000000";
    }
    this.MyToot = root;

    let regionList_filter = regionList.filter(r => {
      return (
        r.region_code.substring(0, this.showLength).padEnd(12, "0") ==
        r.region_code
      );
    });
    let cityList = listToTreeList(
      regionList_filter,
      root,
      "region_code",
      "parent_code",
      "region_code"
    );
    this.cityList = cityList;
    this.reloadFinish();
  }
};
</script>

region.js 文件

export var regionList = [
  { region_code: '450000000000', region_name: '广西壮族自治区', parent_code: '000000000000' },
  { region_code: '450100000000', region_name: '南宁市', parent_code: '450000000000' },
  { region_code: '450102000000', region_name: '兴宁区', parent_code: '450100000000' },
  { region_code: '450103000000', region_name: '青秀区', parent_code: '450100000000' },
  { region_code: '450105000000', region_name: '江南区', parent_code: '450100000000' },
  { region_code: '450107000000', region_name: '西乡塘区', parent_code: '450100000000' },
  { region_code: '450108000000', region_name: '良庆区', parent_code: '450100000000' },
  { region_code: '450109000000', region_name: '邕宁区', parent_code: '450100000000' },
  { region_code: '450110000000', region_name: '武鸣区', parent_code: '450100000000' },
  { region_code: '450123000000', region_name: '隆安县', parent_code: '450100000000' },
  { region_code: '450124000000', region_name: '马山县', parent_code: '450100000000' },
  { region_code: '450125000000', region_name: '上林县', parent_code: '450100000000' },
  { region_code: '450126000000', region_name: '宾阳县', parent_code: '450100000000' },
  { region_code: '450127000000', region_name: '横县', parent_code: '450100000000' },
  { region_code: '450200000000', region_name: '柳州市', parent_code: '450000000000' },
  { region_code: '450202000000', region_name: '城中区', parent_code: '450200000000' },
  { region_code: '450203000000', region_name: '鱼峰区', parent_code: '450200000000' },
  { region_code: '450204000000', region_name: '柳南区', parent_code: '450200000000' },
  { region_code: '450205000000', region_name: '柳北区', parent_code: '450200000000' },
  { region_code: '450206000000', region_name: '柳江区', parent_code: '450200000000' },
  { region_code: '450222000000', region_name: '柳城县', parent_code: '450200000000' },
  { region_code: '450223000000', region_name: '鹿寨县', parent_code: '450200000000' },
  { region_code: '450224000000', region_name: '融安县', parent_code: '450200000000' },
  { region_code: '450225000000', region_name: '融水苗族自治县', parent_code: '450200000000' },
  { region_code: '450226000000', region_name: '三江侗族自治县', parent_code: '450200000000' },
  { region_code: '450300000000', region_name: '桂林市', parent_code: '450000000000' },
  { region_code: '450302000000', region_name: '秀峰区', parent_code: '450300000000' },
  { region_code: '450303000000', region_name: '叠彩区', parent_code: '450300000000' },
  { region_code: '450304000000', region_name: '象山区', parent_code: '450300000000' },
  { region_code: '450305000000', region_name: '七星区', parent_code: '450300000000' },
  { region_code: '450311000000', region_name: '雁山区', parent_code: '450300000000' },
  { region_code: '450312000000', region_name: '临桂区', parent_code: '450300000000' },
  { region_code: '450321000000', region_name: '阳朔县', parent_code: '450300000000' },
  { region_code: '450323000000', region_name: '灵川县', parent_code: '450300000000' },
  { region_code: '450324000000', region_name: '全州县', parent_code: '450300000000' },
  { region_code: '450325000000', region_name: '兴安县', parent_code: '450300000000' },
  { region_code: '450326000000', region_name: '永福县', parent_code: '450300000000' },
  { region_code: '450327000000', region_name: '灌阳县', parent_code: '450300000000' },
  { region_code: '450328000000', region_name: '龙胜各族自治县', parent_code: '450300000000' },
  { region_code: '450329000000', region_name: '资源县', parent_code: '450300000000' },
  { region_code: '450330000000', region_name: '平乐县', parent_code: '450300000000' },
  { region_code: '450381000000', region_name: '荔浦市', parent_code: '450300000000' },
  { region_code: '450400000000', region_name: '梧州市', parent_code: '450000000000' },
  { region_code: '450403000000', region_name: '万秀区', parent_code: '450400000000' },
  { region_code: '450405000000', region_name: '长洲区', parent_code: '450400000000' },
  { region_code: '450406000000', region_name: '龙圩区', parent_code: '450400000000' },
  { region_code: '450421000000', region_name: '苍梧县', parent_code: '450400000000' },
  { region_code: '450422000000', region_name: '藤县', parent_code: '450400000000' },
  { region_code: '450423000000', region_name: '蒙山县', parent_code: '450400000000' },
  { region_code: '450481000000', region_name: '岑溪市', parent_code: '450400000000' },
  { region_code: '450500000000', region_name: '北海市', parent_code: '450000000000' },
  { region_code: '450502000000', region_name: '海城区', parent_code: '450500000000' },
  { region_code: '450503000000', region_name: '银海区', parent_code: '450500000000' },
  { region_code: '450512000000', region_name: '铁山港区', parent_code: '450500000000' },
  { region_code: '450521000000', region_name: '合浦县', parent_code: '450500000000' },
  { region_code: '450600000000', region_name: '防城港市', parent_code: '450000000000' },
  { region_code: '450602000000', region_name: '港口区', parent_code: '450600000000' },
  { region_code: '450603000000', region_name: '防城区', parent_code: '450600000000' },
  { region_code: '450621000000', region_name: '上思县', parent_code: '450600000000' },
  { region_code: '450681000000', region_name: '东兴市', parent_code: '450600000000' },
  { region_code: '450700000000', region_name: '钦州市', parent_code: '450000000000' },
  { region_code: '450702000000', region_name: '钦南区', parent_code: '450700000000' },
  { region_code: '450703000000', region_name: '钦北区', parent_code: '450700000000' },
  { region_code: '450721000000', region_name: '灵山县', parent_code: '450700000000' },
  { region_code: '450722000000', region_name: '浦北县', parent_code: '450700000000' },
  { region_code: '450800000000', region_name: '贵港市', parent_code: '450000000000' },
  { region_code: '450802000000', region_name: '港北区', parent_code: '450800000000' },
  { region_code: '450803000000', region_name: '港南区', parent_code: '450800000000' },
  { region_code: '450804000000', region_name: '覃塘区', parent_code: '450800000000' },
  { region_code: '450821000000', region_name: '平南县', parent_code: '450800000000' },
  { region_code: '450881000000', region_name: '桂平市', parent_code: '450800000000' },
  { region_code: '450900000000', region_name: '玉林市', parent_code: '450000000000' },
  { region_code: '450902000000', region_name: '玉州区', parent_code: '450900000000' },
  { region_code: '450903000000', region_name: '福绵区', parent_code: '450900000000' },
  { region_code: '450921000000', region_name: '容县', parent_code: '450900000000' },
  { region_code: '450922000000', region_name: '陆川县', parent_code: '450900000000' },
  { region_code: '450923000000', region_name: '博白县', parent_code: '450900000000' },
  { region_code: '450924000000', region_name: '兴业县', parent_code: '450900000000' },
  { region_code: '450981000000', region_name: '北流市', parent_code: '450900000000' },
  { region_code: '451000000000', region_name: '百色市', parent_code: '450000000000' },
  { region_code: '451002000000', region_name: '右江区', parent_code: '451000000000' },
  { region_code: '451003000000', region_name: '田阳区', parent_code: '451000000000' },
  { region_code: '451022000000', region_name: '田东县', parent_code: '451000000000' },
  { region_code: '451024000000', region_name: '德保县', parent_code: '451000000000' },
  { region_code: '451026000000', region_name: '那坡县', parent_code: '451000000000' },
  { region_code: '451027000000', region_name: '凌云县', parent_code: '451000000000' },
  { region_code: '451028000000', region_name: '乐业县', parent_code: '451000000000' },
  { region_code: '451029000000', region_name: '田林县', parent_code: '451000000000' },
  { region_code: '451030000000', region_name: '西林县', parent_code: '451000000000' },
  { region_code: '451031000000', region_name: '隆林各族自治县', parent_code: '451000000000' },
  { region_code: '451081000000', region_name: '靖西市', parent_code: '451000000000' },
  { region_code: '451082000000', region_name: '平果市', parent_code: '451000000000' },
  { region_code: '451100000000', region_name: '贺州市', parent_code: '450000000000' },
  { region_code: '451102000000', region_name: '八步区', parent_code: '451100000000' },
  { region_code: '451103000000', region_name: '平桂区', parent_code: '451100000000' },
  { region_code: '451121000000', region_name: '昭平县', parent_code: '451100000000' },
  { region_code: '451122000000', region_name: '钟山县', parent_code: '451100000000' },
  { region_code: '451123000000', region_name: '富川瑶族自治县', parent_code: '451100000000' },
  { region_code: '451200000000', region_name: '河池市', parent_code: '450000000000' },
  { region_code: '451202000000', region_name: '金城江区', parent_code: '451200000000' },
  { region_code: '451203000000', region_name: '宜州区', parent_code: '451200000000' },
  { region_code: '451221000000', region_name: '南丹县', parent_code: '451200000000' },
  { region_code: '451222000000', region_name: '天峨县', parent_code: '451200000000' },
  { region_code: '451223000000', region_name: '凤山县', parent_code: '451200000000' },
  { region_code: '451224000000', region_name: '东兰县', parent_code: '451200000000' },
  { region_code: '451225000000', region_name: '罗城仫佬族自治县', parent_code: '451200000000' },
  { region_code: '451226000000', region_name: '环江毛南族自治县', parent_code: '451200000000' },
  { region_code: '451227000000', region_name: '巴马瑶族自治县', parent_code: '451200000000' },
  { region_code: '451228000000', region_name: '都安瑶族自治县', parent_code: '451200000000' },
  { region_code: '451229000000', region_name: '大化瑶族自治县', parent_code: '451200000000' },
  { region_code: '451300000000', region_name: '来宾市', parent_code: '450000000000' },
  { region_code: '451302000000', region_name: '兴宾区', parent_code: '451300000000' },
  { region_code: '451321000000', region_name: '忻城县', parent_code: '451300000000' },
  { region_code: '451322000000', region_name: '象州县', parent_code: '451300000000' },
  { region_code: '451323000000', region_name: '武宣县', parent_code: '451300000000' },
  { region_code: '451324000000', region_name: '金秀瑶族自治县', parent_code: '451300000000' },
  { region_code: '451381000000', region_name: '合山市', parent_code: '451300000000' },
  { region_code: '451400000000', region_name: '崇左市', parent_code: '450000000000' },
  { region_code: '451402000000', region_name: '江州区', parent_code: '451400000000' },
  { region_code: '451421000000', region_name: '扶绥县', parent_code: '451400000000' },
  { region_code: '451422000000', region_name: '宁明县', parent_code: '451400000000' },
  { region_code: '451423000000', region_name: '龙州县', parent_code: '451400000000' },
  { region_code: '451424000000', region_name: '大新县', parent_code: '451400000000' },
  { region_code: '451425000000', region_name: '天等县', parent_code: '451400000000' },
  { region_code: '451481000000', region_name: '凭祥市', parent_code: '451400000000' },
]

var emptyCode = '000000000000'
var codeLength = 12

function rightPad(str, len, character) {
  var result = str + ''
  if (Object.prototype.toString.call(character) !== '[object String]') {
    character = ' '
  }
  while (result.length < len) {
    result += character
  }
  return result
}

// function codeFilter(code) {
//   var ret = '';
//   if (code.substr(0, 2) !== '00') {
//     ret = rightPad(code.substr(0, 2), codeLength, '0');
//   }
//   if (code.substr(2, 2) !== '00') {
//     ret = rightPad(code.substr(0, 4), codeLength, '0');
//   }
//   if (code.substr(4, 2) !== '00') {
//     ret = rightPad(code.substr(0, 6), codeLength, '0');
//   }
//   return ret;
// }

function parentCode(code) {
  if (!code || code.length != codeLength) return ''
  var ret = emptyCode
  if (code.substr(2, 2) !== '00') {
    ret = rightPad(code.substr(0, 2), codeLength, '0')
  }
  if (code.substr(4, 5) !== '00000') {
    ret = rightPad(code.substr(0, 4), codeLength, '0')
  }
  return ret
}

export function findLikeRegionCode(code) {
  if (!code || code.length != codeLength) return ''
  var codeArr = [code.substring(0, 2), code.substring(2, 4), code.substring(4, 9)],
    rets = []
  codeArr.forEach((ele) => {
    if (parseInt(ele) > 0) {
      rets.push(ele)
    }
  })
  return rets.join('')
}

export function findRegionCodeArr(code) {
  if (!code || code.length != codeLength) return ''
  var rets = [
    rightPad(code.substring(0, 2), codeLength, '0'),
    rightPad(code.substring(0, 4), codeLength, '0'),
    rightPad(code.substring(0, 9), codeLength, '0'),
  ]
  return rets
}

function findParentRegion(regionCode, nameList) {
  var parentRegionCode = parentCode(regionCode)
  if (parentRegionCode.length > 0) {
    var i = regionList.length
    while (i--) {
      if (regionList[i].region_code == parentRegionCode) {
        nameList.push(regionList[i].region_name)
        findParentRegion(parentRegionCode, nameList)
        return
      }
    }
  }
}

//return: "广州市 / 天河区"
export function findFullNameByRegionCode(shortRegionCode, isSheng = false) {
  if (shortRegionCode == 'all') {
    return '总计'
  }
  if (shortRegionCode == null || shortRegionCode.length == 0) return ''
  var nameList = []
  var regionCode = rightPad(shortRegionCode, codeLength, '0')
  var i = regionList.length
  while (i--) {
    if (regionList[i].region_code == regionCode) {
      nameList.push(regionList[i].region_name)
      findParentRegion(regionCode, nameList)
      nameList.reverse() //反转
      if (!isSheng) {
        if (nameList.length > 1) {
          nameList.splice(0, 1) //去除省
        }
      }

      return nameList.join(' / ')
    }
  }
  return ''
}

function addressToRegionCodeLoop(address, codes, likeCode) {
  for (var i = 0, l = regionList.length; i < l; i++) {
    var name = regionList[i].region_name
    var alias = regionList[i].region_alias
    var code = regionList[i].region_code
    var index = address.indexOf(name) //indexOf=0等价于startsWith

    var index2 = -1
    if (alias) {
      index2 = address.indexOf(alias)
    }

    var substr = -1
    if (index == 0) {
      substr = name.length
    } else if (index2 == 0) {
      substr = alias.length
    }

    if (substr > -1 && (!likeCode || code.indexOf(likeCode) == 0)) {
      codes.push(code)
      address = address.substr(substr)
      addressToRegionCodeLoop(address, codes, findLikeRegionCode(code)) //下一级
      break
    }
  }
}

export function addressToRegionCode(address) {
  var codes = []
  addressToRegionCodeLoop(address, codes)
  if (codes.length > 0) {
    return codes[codes.length - 1]
  }
  return ''
}

export function getReionCodeByName(name) {
  let region = regionList.find((r) => r.region_name == name)
  if (region) {
    return region.region_code
  } else {
    return '450000000000'
  }
}

export function getChildrenByCode(pcode) {
  return JSON.parse(JSON.stringify(regionList)).filter((r) => r.parent_code == pcode)
}

爱吃松果的美美

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
封装组件——regionArea行政区域级联下拉（vue+element）

<template> <div v-if="!disabled"> <el-cascader :options="cityList" :size="size" :style="myStyle" :props="{ checkStrictly: checkStrictly, label: 'region_name', c
复制链接

扫一扫

专栏目录