重新对elementUItree进⾏封装（配置根⽬录个数、⼦级个数、同⼀级下不能有
相同的名。。。
⼀、限制根⽬录数量
思路：获取data的长度，如果等于配置数，则提⽰，如果是为验证拖动的情况，因为逻辑代码为拖动后验证，所以长度要⼤于配置数，则提⽰；
valideRootCount(operateType ="normal"){
let operator = operateType =="normal" ? "==":">";
let len = Data.length;
nodeselector
if(eval(len + operator + Count)){
this.$(
`当前根节点数量已经达到设置的最⼤值${Count}`
);
return false;
}
return true;
},
⼆、限制⼦⽬录数量
思路：获取当前节点的⼦节点个数，如果等于配置数，则提⽰，拖动验证理由如上
let operator = operateType =="normal" ? "==":">";
let childNode =!this.validatenull(node[this.childrenKey])
node[this.childrenKey]
:[];
let childLen = childNode.length;
if(
!this.validatenull(childNode)&&
eval(childLen + operator + this.childCount)
){
this.$(
`当前⼦级数量已经达到设置的最⼤值${this.childCount}`
);
return false;
}
return true;
三、不能有相同的名称判断
1、根⽬录名称判断
思路：
1、获取data的⼀级⽬录名称rootLabel
2、判断是添加还是修改
3、如果是添加，如果rootLabel含有name，则提⽰名称重复
4、如果是修改，如果rootLabel含有name并且当前节点的label不等于name，则提⽰名称重复、
5、如果为拖动的情况，出相同的名称，如果名称数量⼤于1则提⽰
valideRootSameName(name, node, operateType ="normal"){
let rootLabel = Data.map((item)=>{
return item[this.labelKey];
});
let nameLen =0;
if(operateType =="drag"){
let names = rootLabel.filter((item)=>{
return item == name;
});
nameLen = names.length;
}
if(
(rootLabel.includes(name)&& pe =="parentAdd")||
(rootLabel.includes(name)&&
node.label != name &&
operateType =="normal")||
(rootLabel.includes(name)&&
nameLen >1&&
operateType =="drag")
){
this.$(`当前根节点下已经有相同的名称${name}`);
return false;
}
return true;
},
2、⼦⽬录名称判断
思路：
1、判断当前操作是新增还是修改
2、如果是新增，取当前节点的⼦节点的所有名称
3、如果是修改，取当前节点⽗节点下的所有⼦节点名称
4、获取⽬录名称childLabel
5、如果是添加，如果childLabel 含有name，则提⽰名称重复
6、如果是修改，如果childLabel 含有name并且当前节点的label不等于name，则提⽰名称重复
7、如果为拖动的情况，出相同的名称，如果名称数量⼤于1则提⽰
valideChildSameName(name, node, operateType ="normal",dragType ="after"){
let childLabel =[];
let currentNode =[];
//如果为添加，则判断当前节点，如果为修改，则为⽗节点
pe =="edit"|| operateType =="drag"){
let parentNode = dragType =="inner" ? node : this.$Node(node[this.parentKey]).data;
if(!this.validatenull(parentNode[this.childrenKey])){
currentNode = parentNode[this.childrenKey];
}
}else{
if(!this.validatenull(node[this.childrenKey])){
currentNode = node[this.childrenKey];
}
}
childLabel = currentNode.map((item)=>{
return item[this.labelKey];
});
let flag =true;
let nameLen =0;
if(operateType =="drag"){
let names = childLabel.filter((item)=>{
return item == name;
});
nameLen = names.length;
}
if(
(childLabel.includes(name)&& pe =="add")||
(childLabel.includes(name)&&
node.label != name &&
operateType =="normal")||
(childLabel.includes(name)&&
operateType =="drag"&&
nameLen >1)
){
this.$(`当前层级下已经有相同的名称${name}`);
flag =false;
}
return flag;
},
四、保存数据
思路：设置pid。如果是添加⼦节点，添加节点的pid等于当前节点的key值。如果添加的是根节点，则pid等于0，等添加请求完成，回调callback添加数据，这样就不⽤重新请求刷新数据
save (data, done){
const callback =(resData)=>{
pe ==="add"){
this.$append(resData, de[this.valueKey])
}else pe ==="parentAdd"){
this.$append(resData)
}
this.hide();
done()
};
if(this.valideSameName(data.label)){
let requestData = data;
pe =="add"){
requestData[this.parentKey]= de[this.valueKey];
}else pe =="parentAdd"){
requestData[this.parentKey]=0;
}
this.$emit("save", requestData, callback);
}
},
update (data, done){
const callback =(resData)=>{
let node = this.$de[this.valueKey])||{};
node.data = this.deepClone(resData)
this.hide();
done()
};
let requestData = this.de);
Object.assign(requestData,data);
this.valideSameName(data.label)&& this.$emit("update",  data, callback); },
五、格式化数据
很多时候后台请求回来的数据并不是标准数据，所以需要格式化
原数据：
let source=[{
id: 1,
pid: 0,
name: 'body'
}, {
id: 2,
pid: 1,
name: 'title'
}, {
id: 3,
pid: 2,
name: 'div'
}]
结果：
1、⽅式⼀
//格式化树形数据
function formateTreeData(oldData){
let dataArray =[];
oldData.forEach(function (data){
if(data.pid ==0){
dataArray.push(data);
}
});
let data = data2treeDG(oldData, dataArray);      console.log(data)
}
function data2treeDG(datas, dataArray){
for(let j =0; j < dataArray.length; j++){
let dataArrayIndex = dataArray[j];
let childrenArray =[];
let Id = dataArrayIndex.id;
for(let i =0; i < datas.length; i++){
let data = datas[i];
if(data.pid == Id){
childrenArray.push(data);
}
}
dataArrayIndex.children = childrenArray;
if(childrenArray.length >0){
/
/有⼉⼦节点则递归
data2treeDG(datas, childrenArray);
}
}
return dataArray;
}
formateTreeData(source)
2、⽅式⼆

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。