Ant Design Vue Tree 树形获取父节点信息
有幸用过这个ant组件一言难尽!了解到这个组件默认不透露父节点信息所以处理是真的麻烦,我这个需求是选中子节点要把它的父节点展示出来!开始用了很多捷径都没成功,最后用循环加递归踏踏实实的去找到它的父节点。...
·
有幸用过这个ant组件 一言难尽!! 了解到这个组件默认不透露父节点信息 所以处理是真的麻烦 ,我这个需求是选中子节点要把它的父节点展示出来!开始用了很多捷径都没成功,最后用循环加递归踏踏实实的去找到它的父节点
代码段:html
<a-tree
v-if="treeData.length"
show-search
:checkedKeys="checkedKeys"
:treeData="treeData"
checkable
:selectable="false"
v-model="selectedKeys"
@select="onSelect"
@check="onCheck"
>
<template slot="name" slot-scope="{ name }">
<span v-html="name.replace(new RegExp(searchValue, 'g'), '<span style=color:#f50>' + searchValue + '</span>')"></span>
</template>
</a-tree>
js数据源
data() {
return {
checkedKeys: [],
checkedList:[],
selectedKeys: [],
searchValue: '',
treeData: [
{
id:"0",
name: '下管街道',
key: '0',
scopedSlots: { title: 'name' },
checkable: false,
children: [
{
name: '金星社区',
key: '0-0',
id:"00",
scopedSlots: { title: 'name' },
checkable: false,
children: [
{
id:"000",
name: '张三-网格员',
key: '0-0-0',
scopedSlots: { title: 'name' },
},
{
id:"001",
name: '李四-市容管理网格员',
key: '0-0-1',
scopedSlots: { title: 'name' },
},
{
id:"002",
name: '王五-网格员',
key: '0-0-2',
scopedSlots: { title: 'name' },
},
{
id:"003",
name: '赵四-环卫网格员',
key: '0-0-3',
scopedSlots: { title: 'name' },
},
],
},
{
name: '和平社区',
key: '0-1',
id:"01",
scopedSlots: { title: 'name' },
checkable: false,
children: [
{
id:"010",
name: '刘琴-网格员',
key: '0-1-0',
scopedSlots: { title: 'name' },
},
{
id:"011",
name: '王雪-市容管理网格员',
key: '0-1-1',
scopedSlots: { title: 'name' },
},
{
id:"012",
name: '李梅-环卫网格员',
key: '0-1-2',
scopedSlots: { title: 'name' },
},
],
},
],
},
],
checkedKeys:[],
searchStr: '',
}
},
js:
//获取父节点
onCheck(checkedKeys) {
var tempArr = [];
if(this.checkedKeys.length>0){
console.log(this.checkedKeys[0].split("-"))
for(let a=0;a<this.checkedKeys.length;a++){
var tempA = this.checkedKeys[a].split("-");
var index = 0;
var tempStr = "";
var data = this.treeData[0];
var id = 0;
var temFuc = ()=>{
index++;
if(tempA.length-index>=0){
console.log(index)
if(tempStr){
tempStr = tempStr+"-"+data.name;
}else{
tempStr = data.name;
}
if(data.children){
data = data.children[tempA[index]];
}else{
id = data.id;
}
temFuc();
}
}
temFuc();
tempArr.push({
text:tempStr,
keys:this.checkedKeys[a],
id:id
})
}
this.checkedList = tempArr;
}
console.log(this.checkedKeys)
},
可以拿到以下俩组数据:
更多推荐
已为社区贡献2条内容
所有评论(0)