VUE+树状图数据格式 递归遍历获取参数
因为当时碰到的项目,需要有个添加菜单,点击的时候获取id,然后使用假数据添加到菜单下面。但是,当取消的时候,因为树状图层级不一致,不好删除。于是采用递归的方式,找到相应的id,进行删除...
·
targetd( )
根据ID找到数据中的url
childrenFilter( )
使用递归改变原数组结构
<template>
<div @click="recursion(id,list)"></div>
</template>
data(){
return{
id:3.1, // 树状图中需要找到的ID
list:[
{id:1,url:"a",children:[id:2,url:"a",children:[]]},
{id:2,url:"b",},
{id:3,url:"c",children:[id:3.1,url:"c.c",children:[]]},
],// 数据格式
targetUrl:"";// 找到的路径
}
},
methods:{
// 递归获取路径 参数1:需要找到的id 参数2:数组(树状图格式)
//opid:3.1
targetd(opid, list) {
// 结束条件
if (list && list.length > 0) {
// 循环遍历
for (let i = 0; i < list.length; i++) {
//结束递归
if (list[i].id === opid) {
this.targetUrl = list[i].url; // c.c
return;
} else {
// 如果数组中有children则继续递归
if (list[i].children) {
this.targetd(opid, list[i].children);
}
}
}
}
},
// 动态改变树状图结构 将ID为2的URL改变为URL (改变原数组结构)
childrenFilter(list) {
if (list && list.length > 0) {
for (let k in list) {
if (list[k].children != null && list[k].children != []) {
list[k].children = this.childrenFilter(list[k].children);
}
}
// 这里用map,forEach都行 用filter是因为这里还可以做过滤处理
list = list.filter(o => {
if(o.id=="2")o.url="url"
return true
});
return list;
}
},/* [
{id:1,url:"a",children:[id:2,url:"URL",children:[]]},
{id:2,url:"URL",},
{id:3,url:"c",children:[id:3.1,url:"c.c",children:[]]},
],// 数据格式
*/
}
更多推荐
已为社区贡献2条内容
所有评论(0)