element-ui中的中国省市区级联选择器

安装

以下教程参考自官方的教程：https://www.npmjs.com/package/element-china-area-data

执行以下语句安装城市数据：

npm install element-china-area-data -S

导入

以vue-cli创建的项目为例，在vue文件中的scrit标签内导入数据：

import { regionData, CodeToText } from "element-china-area-data";

使用

如下代码所示：

若要将“广东省 广州市 番禺区”换算为代号，可以用以下代码：

getCityCode(cityText) {
  var codeArray = [];
  if (cityText != "") {
    var cityArray = cityText.trim().split(" ");

    if (cityArray.length == 1) {
      codeArray.push(TextToCode[cityArray[0]].code);
    } else if (cityArray.length == 2) {
      codeArray.push(TextToCode[cityArray[0]].code);
      codeArray.push(TextToCode[cityArray[0]][cityArray[1]].code);
    } else if (cityArray.length == 3) {
      codeArray.push(TextToCode[cityArray[0]].code);
      codeArray.push(TextToCode[cityArray[0]][cityArray[1]].code);
      codeArray.push(
        TextToCode[cityArray[0]][cityArray[1]][cityArray[2]].code
      );
    }
  }

  return codeArray;
}

效果

如下图所示：