form表单回填tree的数据时,后端不能提供tree的所需数据格式,后端提供的数据还是tree的数据格式,我需要把tree的数据格式转化成回填所需要的的数据格式,如:["1309303221440761857","1451486975712358401","1309303221440761860"]的数据格式
一、tree的form表单回填数据
<el-tree
:data="menuList"
:props="menuListTreeProps"
:default-checked-keys="checkMenuRole"
:default-expanded-keys="expandRole"
node-key='id'
accordion
@check='treeCheck'
show-checkbox>
</el-tree>
1、data:是tree展示的数据
2、props:如果后端数据不是label和children字段,设置如:
{ label:‘name’,children:'subMenuList' }
3、default-checked-keys :数据回填所需的字段,数据如:["1309303221440761857","1451486975712358401","1309303221440761860"]
4、default-expand-keys: 默认展开的节点
5、node-key: 每个节点作为唯一的表示属性,必须要与后端数据的字段保持一致
6、check:获取选中的数据方法
treeCheck(...value) {
//选中当前节点的数据
let checkedNodes = value[1].checkedNodes.map((v) => v.id);
},
后端返回此数据
[{
id: "1309303221440761857",
name: "目录1",
subMenuList: [{
id: "1309303221440761860",
name: "菜单目-1",
}, {
id: "1309303221440761860",
name: "菜单目-2",
}]
}, {
id: "1309303221440761860",
name: "目录2",
subMenuList: [{
id: "1309303221440761872",
name: "菜单一",
subMenuList: [{
id: "1309303228642381863",
name: "菜单一1",
}, {
id: "1309303228642381861",
name: "菜单一2",
}]
}, {
id: "1309303221440761873",
name: "菜单二",
}]
}
]
在上面此数据中取出只有ID的数组
let menuFilter = (function () {
let resultArr = [];
let getTickMenuId = function (obj) {
if (obj.id) {
resultArr.push(obj.id);
}
if (obj.subMenuList instanceof Array) {
for (let child of obj.subMenuList) {
getTickMenuId(child);
}
}
}
return {
filter: function (arr) {
if (!arr instanceof Array) {
return false;
}
resultArr = [];
for (let rootMenu of arr) {
getTickMenuId(rootMenu);
}
return resultArr;
}
}
})();
使用方法:
menuFilter.filter(arr)