iview Cascader 级联选择 树结构遍历

写法是vue的

<Cascader :data="choose" trigger="hover" @on-change="chooseLine"></Cascader>

data里设置 choose: [],

mounted方法里需要获取url的接口

import { mapList } from "@/api/api-census-main";   url接口

mounted里调用 

mapList().then(res => {

var json = res.data;

var parentNode = null;

var node = null;

// console.log(json);

let list = []

for(var i=0;i<json.length;i++) {

var children = []

for(var j=0;j<json[i].lineData.length;j++) {

var child = json[i].lineData[j]   //子级集合

children.push({

value:child.LINE_ID,   //这里是你的树的子级id

label:child.LINE_NAME   //这里是你的树的子级name

})

}

list.push({

value: json[i].trackId,  //这里是你的树的第一层的id

label: json[i].trackName,  //这里是你的树的第一层的name

children: children

})

}

// console.log(list);

this.choose = list   //这里获取到我们遍历的树形结构

});

 

 

觉得不错的小伙伴，点个关注，点个赞呗！！！！！！！！！！！！！