封装el-cascader 省市区街道 4级联动 本地离线数据，带数据

今天找到了大半天，没找到合适的 vue el-cascader 省市区街道4级联动的数据，并且支持维护修改的。
于是自己做了一个。

代码非常简单，重要的符合这个格式的数据，这就是我这个懂后端程序员的优势了。

<template>
  <el-cascader
    ref="cascader"
    :props="optionProps"
    :options="cityList"
    filterable
    v-model="selectedOptions"
    clearable
    @change="handleChange"
  ></el-cascader>
</template>
 
<script>
import citydata from "./data.js";
export default {
  name: "areaCascader",
  components: { citydata },
  data() {
    return {
      selectedOptions: [],
      cityList: citydata.AREA_LIST,
      optionProps: {
        value: "id",
        label: "name",
        children: "child",
      },
    };
  },
  mounted() {},
  methods: {
    handleChange(value) {
      if (value.length > 0) {
        // 获取当前选中节点
        let checkNode = this.$refs["cascader"].getCheckedNodes();
        // 将当前选中节点数据和当前路径数组返回给父组件
        this.$emit("getData", checkNode[0].data, checkNode[0].pathLabels);
      } else {
        this.$emit("getData", {}, []);
      }
    },
  },
};
</script>

如果找不到资源，就留下邮箱，我发给你。