在使用vue和museui构建移动站的时候发现museui中没有树状结构的UI组件,因业务需求,项目中的组织结构是树状结构,在npm中找到 <code>vue-treeselect</code> ,第一次使用,发现不能对树状结构的属性进行配置
[
{
id:1,
lable:"一级组织",
children:[
{
id:1,
lable:"二级组织",
children:[]
},
{
id:1,
lable:"二级组织",
children:[]
}
]
}
]
// 后台返回的数据机构
[{
"title": "中国有限公司",
"key": "1",
"value": "1",
"children": [{
"title": "武汉有限公司",
"key": "2",
"value": "2",
"children": [{
"title": "无锡有限公司",
"key": "3",
"value": "3",
"children": [{
"title": "afasdfa",
"key": "6",
"value": "6",
"children": []
}, {
"title": "asdfasdfasdf",
"key": "8",
"value": "8",
"children": []
}]
}, {
"title": "asdfasdfasdf",
"key": "7",
"value": "7",
"children": []
}]
}, {
"title": "test11111111",
"key": "4",
"value": "4",
"children": [{
"title": "test123456",
"key": "5",
"value": "5",
"children": []
}]
}, {
"title": "测试公司",
"key": "9",
"value": "9",
"children": []
}, {
"title": "重工技术有限公司",
"key": "11",
"value": "11",
"children": []
}]
}]
其中 props {id:'',label:'',children:[]}是不能项elementui中可以自己传入自己定义key值,
<treeselect :value="value"
placeholder='请选择组织'
@select='selectNode'
:options="options">
<label slot="option-label"
slot-scope="{ node, shouldShowCount, count, labelClassName }"
:class="labelClassName">
<span class="">{{ node.label }}</span>
</label>
</treeselect>
那就只能通过对数据进行处理得到 vue-treeselect需要的数据
export const treeFormat = (arr) => {
// [{
// id: 'a',
// label: 'a',
// children:[
// {
// id: 'a',
// label: 'a',
// children:[]
// },
// {
// id: 'a',
// label: 'a',
// }
// ]
// },
// {
// id: 'b',
// label: 'b'
// }
// ]
if (Array.isArray(arr)) return
let newTree = []
arr.map(el => {
if (el.children && el.children.length) {
let childNode = treeFormat(el.children)
newTree.push({
id: el.key,
label: el.title,
children: childNode
})
} else {
newTree.push({
id: el.key,
label: el.title
})
}
})
console.log(newTree)
return newTree
}
[{
"id": "1",
"label": "中国有限公司",
"children": [{
"id": "2",
"label": "武汉有限公司",
"children": [{
"id": "3",
"label": "无锡有限公司",
"children": [{
"id": "6",
"label": "afasdfa"
}, {
"id": "8",
"label": "asdfasdfasdf"
}]
}, {
"id": "7",
"label": "asdfasdfasdf"
}]
}, {
"id": "4",
"label": "test11111111",
"children": [{
"id": "5",
"label": "test123456"
}]
}, {
"id": "9",
"label": "测试公司"
}, {
"id": "11",
"label": "重工技术有限公司"
}]
}]