vue-cascader中国城市三级联动

<template>
    <div>
        <el-cascader
            :options="options"
            :props="props"
            v-model="selectedOptions"
            @change="handleChange"
            @active-item-change="handleChange"
            v-bind="$attrs"
            :clearable="clearable"
            :filterable="filterable"
            :change-on-select="changeOnSelect"
            :disabled="disabled"
            :show-all-levels="showAllLevels"
        ></el-cascader>
    </div>
</template>
<script>
import PlaceCode from "@/assets/js/placeCode"
export default {
    data(){
        return{
            options: [],
            selectedOptions: [],
            keyPath: null,
            //是否可搜索选项
            filterable: false,
            //是否允许选择任意一级的选项 默认值false
            changeOnSelect: false,
           //是否禁用
            disabled: false,
            clearable:true,
            //输入框中是否显示选中值的完整路径
            showAllLevels:true,
            props: {
                value: "id",
                label: "name",
                children: "children",
                disabled: "disabled"
            }
        }
    },
    async mounted() {
       await this.find();
    },
    methods:{
            /**
     * 加载数据
     */
    async find() {
      let options = PlaceCode;
      if (Array.isArray(options)) {
        this.options = await this.newOptions(options);
        this.setSelectedOptions(this.value);
      } else {
        this.options = [];
        this.selectedOptions = [];
      }
    },
    setSelectedOptions(value) {
      if (value && this.findKeyPath(this.options, value)) {
        this.selectedOptions = this.keyPath;
      } else {
        this.selectedOptions = [];
      }
    },
    /**
     * 查找当前标识符和所有父项标识符组成的路径
     */
    findKeyPath(options, id, indexs) {
      var index = indexs;
      if (index == null) {
        this.keyPath = [];

        if (!options || options.length == 0 || !id) {
          return;
        }
        index = 0;
      }

      for (var o of options) {
        this.keyPath[index] = o.id;

        if (o.id == id) {
          return true;
        }

        if (o.children && o.children.length > 0) {
          if (this.findKeyPath(o.children, id, index + 1) === true) {
            return true;
          }
        }
      }
    },
    /**
     * 选择
     */
    handleChange(newValue) {
      let code = "";
      if (newValue.length > 0) {
        code = newValue[newValue.length - 1];
      }
      this.$emit("update:value", code);

      // 区域代码
      let areaCode = code;
      if (newValue.length === 3) {
        let level1 = newValue[0];
        if ("110000|120000|310000|500000".indexOf(level1) !== -1) {
          // 直辖市的区域代码不变
        } else {
          // 省
          areaCode = newValue[1]; // 省的县级市的区域代码设置为地级市的行政区划代码
        }
      }
      this.$emit("update:areaCode", areaCode);
    },
    /**
     * 递归处理
     * 将所有的id更换为string类型
     */
    newOptions(options) {
      options.forEach(item => {
        item.id = String(item.id);
        if (item.children) {
          this.newOptions(item.children);
        }
      });
      return options;
    }
    }
}
</script>
<style lang="scss" scoped>

</style>

import PlaceCode from "@/assets/js/placeCode"，是引入的中国城市的js文件

效果是下面这样的：