vue + element三步实现省市区三级联动，超级简单

博客:nicezz.com

**文件链接:area.json

1.首先在vue文件中导入省市区三级JSON文件，信息来源自国家民政部，不包含港澳台。并在data（）中初始化。

import AreaJson from "../../../static/area.json"

  data() {
    return {
      areaData: []
    }
  },

2.使用elementui中的cascader组件

 <el-cascader
        v-model="dataModel"
        placeholder="请选择地区"
	:props="{ expandTrigger: 'hover' }"
        :options="areaData"
      >
  </el-cascader>

3.在created中进一步操作数据

 created() {
      this.areaData = AreaJson
      for (var i = 0; i < this.areaData.length; i++) {
        if (this.areaData[i].children.length == 0) {
          delete this.areaData[i].children //解决因为省级区域没有下级市的BUG
        }
      }
  },

OK… 完成

效果