利用el-cascader 级联选择器做一个城市多级联动

利用el-cascader 级联选择器做一个城市多级联动
直接看代码

 <div class="date_box">
                      <el-cascader  v-model="searchable.sscq" popper-class="diyCascader"
                                    :options="sscqOptions" //sscqOptions值
                                    filterable   //是否能搜索项目
                                   placeholder="行政区"
                                    clearable  //加上一个小图标可以清空选项框
                                    size="mini"
                                    :props="props"
                                    change-on-select
                      ></el-cascader>
                    </div>

data 中
sscqOptions: [],//所属城区字典 ，也可以自己手动写死内容
props: {
value: ‘id’,
children: ‘childList’, //是否有子选项，当children 不写就是只有一个选项没有子选项，比如只显示城区不显示下面的街道社区等，加上children就可以多级联动
label: ‘name’
},

 created() {
        //查询字典
        getAreaDictionaryTree().then((res) => { //获取接口将城区给data中的sscqOptions 
          if (res.data.code == 0) {
            this.sscqOptions = res.data.data
          }
        })
      },

效果图