iview Cascader 级联选择 树结构遍历

本文介绍如何在Vue项目中使用Cascader组件并实现数据的动态加载。通过调用后端API获取数据,解析返回的JSON数据,并将其转换为Cascader组件所需的树状结构,最终实现在页面上动态展示数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写法是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   //这里获取到我们遍历的树形结构

});

 

 

觉得不错的小伙伴,点个关注,点个赞呗!!!!!!!!!!!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值