写到一个利用树形组件分配权限的时候,传过去的数据必须是按顺序排列好的一个数组,所以就写了一个函数实现这个要求~
<template>
<div>
<el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @check="treeChose"></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
defaultKeys: [],
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1"
},
{
id: 10,
label: "三级 1-1-2"
}
]
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1"
},
{
id: 6,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2"
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
form: {
menuIds: []
}
};
},
created() {},
methods: {
treeChose(data, node) {
let _this = this;
// console.log(data, node);
_this.form.menuIds = [];
// 选择的节点id
let checkNodeKeys = node.checkedKeys;
// 半选的节点id
let halfCheckNodeKeys = node.halfCheckedKeys;
// console.log(checkNodeKeys, halfCheckNodeKeys);
// 根据节点 id 顺序,将 menuId 按顺序放入 form 的 menuIds 属性中
function addMenuId(val) {
// console.log(val);
// 如果 menuIds 中没有 且选中节点或者半选节点 id 中存在,就放进去
if (
_this.form.menuIds.indexOf(val.id) == -1 &&
(halfCheckNodeKeys.indexOf(val.id) != -1 ||
checkNodeKeys.indexOf(val.id) != -1)
) {
_this.form.menuIds.push(val.id);
// 放过之后,循环节点的 children 属性
for (let j of val.children ? val.children : []) {
addMenuId(j);
}
}
}
for(let i of _this.data){
addMenuId(i);
}
console.log(_this.form.menuIds);
}
}
};
</script>
<style scoped>
</style>