首先打开elementui网站，使用这个

image.png

<el-cascader
          :options="area"
          :props="props"
          v-model="selarea"
          :show-all-levels="false"
          clearable >
</el-cascader>
//expand-change 当展开节点发生变化时触发    回调：各父级选项值组成的数组
// :show-all-levels="false" 选中的面板只展示最后一级
<script>
// import summaryDetails from './summary-details'
export default {
  data() {
    return {
     selarea:[]//选中的数据
     area:[] // 一开始的省份
      props: {
        multiple: true,//是否多选
        value: 'id',//指定选项的值为选项对象的某个属性值
        label: 'name',//指定选项标签为选项对象的某个属性值
        children: 'list',//指定选项的子选项为选项对象的某个属性值
        checkStrictly: true//是否严格的遵守父子节点不互相关联
      }
   }
  }
}
<script>

//省级数据
'area':[ { "id": "11000", "name": "北京市", "pid": "0", "state": 1, "list": [] }, { "id": "12000", "name": "天津市", "pid": "0", "state": 1, "list": [] }, { "id": "130000", "name": "河北省", "pid": "0", "state": 1, "list": [] }, { "id": "140000", "name": "山西省", "pid": "0", "state": 1, "list": [] }, { "id": "150000", "name": "内蒙古自治区", "pid": "11", "state": 1, "list": [] }, { "id": "210000", "name": "辽宁省", "pid": "0", "state": 1, "list": [] }, { "id": "220000", "name": "吉林省", "pid": "0", "state": 1, "list": [] }, { "id": "230000", "name": "黑龙江省", "pid": "11", "state": 1, "list": [] }, { "id": "31000", "name": "上海市", "pid": "0", "state": 1, "list": [] }, { "id": "320000", "name": "江苏省", "pid": "0", "state": 1, "list": [] }, { "id": "330000", "name": "浙江省", "pid": "0", "state": 1, "list": [] }, { "id": "340000", "name": "安徽省", "pid": "0", "state": 1, "list": [] }, { "id": "350000", "name": "福建省", "pid": "0", "state": 1, "list": [] }, { "id": "360000", "name": "江西省", "pid": "0", "state": 1, "list": [] }, { "id": "370000", "name": "山东省", "pid": "0", "state": 1, "list": [] }, { "id": "410000", "name": "河南省", "pid": "0", "state": 1, "list": [] }, { "id": "420000", "name": "湖北省", "pid": "0", "state": 1, "list": [] }, { "id": "430000", "name": "湖南省", "pid": "0", "state": 1, "list": [] }, { "id": "440000", "name": "广东省", "pid": "0", "state": 1, "list": [] }, { "id": "450000", "name": "广西壮族自治区", "pid": "11", "state": 1, "list": [] }, { "id": "460000", "name": "海南省", "pid": "0", "state": 1, "list": [] }, { "id": "50000", "name": "重庆市", "pid": "0", "state": 1, "list": [] }, { "id": "510000", "name": "四川省", "pid": "0", "state": 1, "list": [] }, { "id": "520000", "name": "贵州省", "pid": "0", "state": 1, "list": [] }, { "id": "530000", "name": "云南省", "pid": "0", "state": 1, "list": [] }, { "id": "540000", "name": "西藏自治区", "pid": "11", "state": 1, "list": [] }, { "id": "610000", "name": "陕西省", "pid": "0", "state": 1, "list": [] }, { "id": "620000", "name": "甘肃省", "pid": "0", "state": 1, "list": [] }, { "id": "630000", "name": "青海省", "pid": "11", "state": 1, "list": [] }, { "id": "640000", "name": "宁夏回族自治区", "pid": "11", "state": 1, "list": [] }, { "id": "650000", "name": "新疆维吾尔自治区", "pid": "11", "state": 1, "list": [] } ],
//拿到省级数据后将数据中循环添加空的list:[],同时点击省级数据时候 通过判断得到的val与省级数据中的val对比，将市级数据放在点击的省级中
//市级数据
'citys':[ { "id": "410100", "name": "郑州市", "pid": "410000", "state": 2, "list": [] }, { "id": "410200", "name": "开封市", "pid": "410000", "state": 2, "list": [] }, { "id": "410300", "name": "洛阳市", "pid": "410000", "state": 2, "list": [] }, { "id": "410400", "name": "平顶山市", "pid": "410000", "state": 2, "list": [] }, { "id": "410500", "name": "安阳市", "pid": "410000", "state": 2, "list": [] }, { "id": "410600", "name": "鹤壁市", "pid": "410000", "state": 2, "list": [] }, { "id": "410700", "name": "新乡市", "pid": "410000", "state": 2, "list": [] }, { "id": "410800", "name": "焦作市", "pid": "410000", "state": 2, "list": [] }, { "id": "410900", "name": "濮阳市", "pid": "410000", "state": 2, "list": [] }, { "id": "411000", "name": "许昌市", "pid": "410000", "state": 2, "list": [] }, { "id": "411100", "name": "漯河市", "pid": "410000", "state": 2, "list": [] }, { "id": "411200", "name": "三门峡市", "pid": "410000", "state": 2, "list": [] }, { "id": "411300", "name": "南阳市", "pid": "410000", "state": 2, "list": [] }, { "id": "411400", "name": "商丘市", "pid": "410000", "state": 2, "list": [] }, { "id": "411500", "name": "信阳市", "pid": "410000", "state": 2, "list": [] }, { "id": "411600", "name": "周口市", "pid": "410000", "state": 2, "list": [] }, { "id": "411700", "name": "驻马店市", "pid": "410000", "state": 2, "list": [] }, { "id": "411800", "name": "济源市", "pid": "410000", "state": 2, "list": [] } ],
//拿到市级数据后将数据中循环添加空的list:[],同时点击市级数据时候 通过双重判断，将县级数据放在选中的市级数据中
//县级数据：
are：[ { "id": "410101", "name": "金水区", "pid": "410100", "state": 3 }, { "id": "410102", "name": "中原区", "pid": "410100", "state": 3 }, { "id": "410103", "name": "二七区", "pid": "410100", "state": 3 }, { "id": "410104", "name": "管城回族区", "pid": "410100", "state": 3 }, { "id": "410106", "name": "上街区", "pid": "410100", "state": 3 }, { "id": "410108", "name": "惠济区", "pid": "410100", "state": 3 }, { "id": "410109", "name": "郑东新区", "pid": "410100", "state": 3 }, { "id": "410110", "name": "高新区", "pid": "410100", "state": 3 }, { "id": "410111", "name": "经开区", "pid": "410100", "state": 3 }, { "id": "410122", "name": "中牟县", "pid": "410100", "state": 3 }, { "id": "410181", "name": "巩义市", "pid": "410100", "state": 3 }, { "id": "410182", "name": "荥阳市", "pid": "410100", "state": 3 }, { "id": "410183", "name": "新密市", "pid": "410100", "state": 3 }, { "id": "410184", "name": "新郑市", "pid": "410100", "state": 3 }, { "id": "410185", "name": "登封市", "pid": "410100", "state": 3 } ],