1、从后端调用接口，传递数据到前端
2、使用VUE代码显示级联选项
<el-cascader:disabled="isDisabled":props="defaultParams":options="options"v-model="selectedOptions":show-all-levels="false"filterable:clearable="true"></el-cascader>
3、定义JS
data() {options: [],selectedOptions: [],defaultParams: {label: "name",value: "code",children: "children",},}，created() {listArea(330000).then((response) => {console.log(response);this.options = this.getTreeData(response);this.loading = false;});},methods: {// 递归消除空数组getTreeData(data) {// 循环遍历json数据for (var i = 0; i < data.length; i++) {if (data[i].children.length < 1) {// children若为空数组，则将children设为undefineddata[i].children = undefined;} else {// children若不为空数组，则继续 递归调用 本方法this.getTreeData(data[i].children);}}return data;}}
4、显示效果如下
