問題描述1：把樹形數(shù)據(jù)里面的數(shù)字類型的id轉(zhuǎn)化為String類型
// 遞歸遍歷樹,通過map遍歷直接修改原數(shù)組數(shù)據(jù)，數(shù)組其他的數(shù)據(jù)不變
getNewTree(obj){
obj.map(item=>{
if(item.parentId){
item.parentId=toString(item.parentId)
}
item.id=toString(item.id)
if(item.children&&item.children.length>0){
console.log('item.children',item.children);
this.getNewTree(item.children)
}
})
console.log('obj',obj);
return obj
},數(shù)據(jù)實例：文章來源：http://www.zghlxwxcb.cn/news/detail-537902.html
obj=[
{
id: 0,
name: "根部門",
children: [
{
id: 1,
parentId: 0,
name: "總經(jīng)辦",
children: [
{
id: 2,
parentId: 1,
name: "行政中心",
children: [
{
id: 1601108165253050400,
parentId: 2,
name: "測試（后面刪除）",
children: []
}
]
},
{
id: 3,
parentId: 1,
name: "技術(shù)中心",
children: [
{
id: 5,
parentId: 3,
name: "研發(fā)中心",
children: []
},
{
id: 6,
parentId: 3,
name: "產(chǎn)品中心",
children: []
},
{
id: 7,
parentId: 3,
name: "測試中心",
children: []
}
]
},
{
id: 4,
parentId: 1,
name: "運營中心",
children: []
}
]
},
{
id: 1600321569821978600,
parentId: 0,
name: "測試總",
children: [
{
id: 1600322339174772700,
parentId: 1600321569821978600,
name: "測試分部1",
children: [
{
id: 1600322409232232400,
parentId: 1600322339174772700,
name: "測試分部2修改一下",
children: []
}
]
},
{
id: 1600330539424968700,
parentId: 1600321569821978600,
name: "測試部門123",
children: [
{
id: 1600330634228822000,
parentId: 1600330539424968700,
name: "子部門",
children: []
}
]
}
]
},
{
id: 1600321707797803000,
parentId: 0,
name: "測試總3",
children: []
}
]
}
]
方法調(diào)用：
getNewTree(obj)問題描述2：扁平化數(shù)據(jù)轉(zhuǎn)化為樹形結(jié)構(gòu)
問題描述3：選中的子節(jié)點的id，獲取其它父輩信息，按照要求返回一個新的樹
// 思路
//1.先深拷貝一份data數(shù)據(jù),用于初始循環(huán)時數(shù)據(jù)使用
//2.將選擇的id的父輩以及當先選擇的checked變?yōu)閠rue
//3.遍歷循環(huán)第2步生成的新樹，獲取自己想要的數(shù)據(jù)<template>
<div>
1.樹形結(jié)構(gòu)數(shù)據(jù)處理
1.1數(shù)據(jù)的處理
1.2樹的懶加載
2.自定義樹結(jié)構(gòu)
<div>
<el-tree
ref="tree"
:data="dataCopy"
show-checkbox
node-key="id"
@check="check"
:default-expanded-keys="[2, 3]"
:default-checked-keys="defaultCheckedkeys"
:props="defaultProps">
</el-tree>
<div>
<el-button type="primary" @click="handle">處理</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
ids:[],
defaultCheckedkeys:[],
defaultProps: {
children: 'child',
label: 'value'
},
data:[],
dataCopy:[],
checked:false,
}
},
created(){
// 思路
//1.先深拷貝一份data數(shù)據(jù),用于初始循環(huán)時數(shù)據(jù)使用
//2.將選擇的id的父輩以及當先選擇的checked變?yōu)閠rue
//3.遍歷循環(huán)第2步生成的新樹，獲取自己想要的數(shù)據(jù)
let data=[
{
id: "瀘州園區(qū)",
value: "瀘州園區(qū)",
type: 0,
disabled: false,
child: [
{
id: "0ce7d445-3d34-470f-993a-bf0ea56cf859",
value: "礦山",
type: 1,
disabled: false,
child: [
{
id: "0ce7d4453d34470f993abf0ea56cf8591",
value: "1",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf8592",
value: "2",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf8593",
value: "3",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf8594",
value: "4",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf8595",
value: "5",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf8596",
value: "6",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf8597",
value: "7",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf8598",
value: "8",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf8599",
value: "9",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85910",
value: "10",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85911",
value: "11",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85912",
value: "12",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85913",
value: "13",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85914",
value: "14",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85915",
value: "15",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85916",
value: "16",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85917",
value: "17",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85918",
value: "18",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85919",
value: "19",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85920",
value: "20",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85921",
value: "21",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85922",
value: "22",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85923",
value: "23",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85924",
value: "24",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85925",
value: "25",
type: 2,
disabled: false,
child: null
},
{
id: "0ce7d4453d34470f993abf0ea56cf85926",
value: "26",
type: 2,
disabled: false,
child: null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85927",
"value": "27",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85928",
"value": "28",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85929",
"value": "29",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85930",
"value": "30",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85931",
"value": "31",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85932",
"value": "32",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85933",
"value": "33",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85934",
"value": "34",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85935",
"value": "35",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85936",
"value": "36",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85937",
"value": "37",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85938",
"value": "38",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85939",
"value": "39",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85940",
"value": "40",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85941",
"value": "41",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85942",
"value": "42",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "0ce7d4453d34470f993abf0ea56cf85943",
"value": "43",
"type": 2,
"disabled": false,
"child": null
}
]
}
]
},
{
"id": "南京園區(qū)",
"value": "南京園區(qū)",
"type": 0,
"disabled": false,
"child": [
{
"id": "5096dbc5-27ba-4b58-8401-8f37b9660a3e",
"value": "新城總部大廈B座",
"type": 1,
"disabled": false,
"child": [
{
"id": "5096dbc527ba4b5884018f37b9660a3e1",
"value": "1",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "5096dbc527ba4b5884018f37b9660a3e2",
"value": "2",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "5096dbc527ba4b5884018f37b9660a3e3",
"value": "3",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "5096dbc527ba4b5884018f37b9660a3e4",
"value": "4",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "5096dbc527ba4b5884018f37b9660a3e5",
"value": "5",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "5096dbc527ba4b5884018f37b9660a3e6",
"value": "6",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "5096dbc527ba4b5884018f37b9660a3e7",
"value": "7",
"type": 2,
"disabled": false,
"child": null
}
]
},
{
"id": "68d91578-e6ca-4be5-ada0-7b52fedebe34",
"value": "1辦公樓",
"type": 1,
"disabled": false,
"child": [
{
"id": "68d91578e6ca4be5ada07b52fedebe344",
"value": "4",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "68d91578e6ca4be5ada07b52fedebe345",
"value": "5",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "68d91578e6ca4be5ada07b52fedebe346",
"value": "6",
"type": 2,
"disabled": false,
"child": null
}
]
}
]
},
{
"id": "成都園區(qū)",
"value": "成都園區(qū)",
"type": 0,
"disabled": false,
"child": [
{
"id": "741296d2-ab82-4f94-b000-e0d7471a1166",
"value": "春熙路23號辦公樓",
"type": 1,
"disabled": false,
"child": [
{
"id": "741296d2ab824f94b000e0d7471a11661",
"value": "1",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a11662",
"value": "2",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a11663",
"value": "3",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a11664",
"value": "4",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a11665",
"value": "5",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a11666",
"value": "6",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a11667",
"value": "7",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a11668",
"value": "8",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a11669",
"value": "9",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116610",
"value": "10",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116611",
"value": "11",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116612",
"value": "12",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116613",
"value": "13",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116614",
"value": "14",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116615",
"value": "15",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116616",
"value": "16",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116617",
"value": "17",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116618",
"value": "18",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116619",
"value": "19",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116620",
"value": "20",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116621",
"value": "21",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116622",
"value": "22",
"type": 2,
"disabled": false,
"child": null
},
{
"id": "741296d2ab824f94b000e0d7471a116623",
"value": "23",
"type": 2,
"disabled": false,
"child": null
}
]
}
]
},
{
id: "青山園區(qū)",
value: "青山園區(qū)",
type: 0,
disabled: false,
child: [
{
id: "bc5104fa-02b0-483e-96a7-06dab2cd0046",
value: "原料倉庫",
type: 1,
disabled: false,
child: [
{
id: "bc5104fa02b0483e96a706dab2cd00461",
value: "1",
type: 2,
disabled: false,
child: null
},
{
id: "bc5104fa02b0483e96a706dab2cd00462",
value: "2",
type: 2,
disabled: false,
child: null
}
]
}
]
}
]
this.dataCopy=JSON.parse(JSON.stringify(data))
},
methods:{
check(data, selectObj){
// ids為選中的子元素的id的集合
this.ids = this.$refs.tree.getCheckedKeys(true)
console.log('ids',this.ids);
//重新賦值原始值,進行數(shù)據(jù)處理
this.data= JSON.parse(JSON.stringify(this.dataCopy))
let result=[]
this.ids.map(item=>{
this.findParent(this.data,item,result)
})
console.log('data',result);
},
// 將選擇的id的父輩以及當先選擇的checked變?yōu)閠rue
findParent(data, target, result) {
for (let i in data) {
let item = data[i]
if (item.id === target) {
item.checked=true
// result.unshift(item.value)
return true
}
if (item.child && item.child.length > 0) {
let ok = this.findParent(item.child, target, result)
if (ok) {
item.checked=true
// result.unshift(item.value)
return true
}
}
}
//走到這說明沒找到目標
return false
},
//打印出來的data為最終的想要的結(jié)果
handle(){
let data=[]
this.getTreeList(this.data,data)
console.log('data',data);
},
// 獲取自己想要的數(shù)據(jù)
getTreeList(treeList,newTreeList) {
treeList.map(c=>{
if(c.checked){
let tempData={
targetId:c.id,
type:c.disabled
}
if(c.child && c.child.length>0){
tempData.children=[]
this.getTreeList(c.child,tempData.children)
}
newTreeList.push(tempData)
}
})
console.log('newTreeList',newTreeList);
}
}
}
</script>
<style>
</style>主要代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-537902.html
// 將選擇的id的父輩以及當先選擇的checked變?yōu)閠rue
findParent(data, target, result) {
for (let i in data) {
let item = data[i]
if (item.id === target) {
item.checked=true
// result.unshift(item.value)
return true
}
if (item.child && item.child.length > 0) {
let ok = this.findParent(item.child, target, result)
if (ok) {
item.checked=true
// result.unshift(item.value)
return true
}
}
}
//走到這說明沒找到目標
return false
},
// 獲取自己想要的數(shù)據(jù)
getTreeList(treeList,newTreeList) {
treeList.map(c=>{
if(c.checked){
let tempData={
targetId:c.id,
type:c.disabled
}
if(c.child && c.child.length>0){
tempData.children=[]
this.getTreeList(c.child,tempData.children)
}
newTreeList.push(tempData)
}
})
console.log('newTreeList',newTreeList);
}到了這里，關(guān)于遞歸遍歷樹結(jié)構(gòu)數(shù)據(jù)（js，vue）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
