<脚本>exportdefault{name:'Tag',data(){return{alignDir:'center',textMap:{update:'edit',create:'add',},dialogStatus:'',dialogFormVisible:false,temp:{},isResouceShow:1,sonStatus:false,casArr:[],idx:'',childKey:[],rules:{location:[{required:true,message:'请选择级别',trigger:'blur',},],label:[{required:true,message:'请输入名称',trigger:'blur'},],children:[{required:true,message:'请选择子位置',trigger:'blur',},],},locationData:[{id:'1',name:'top',},{id:'2',name:'sub',},],tableData:[{tagId:'1',//labelidlabel:'0th',//labelnameparent:'',//parentnamelocation:'1',//levelvalue:'0',//identificationchildren:[{tagId:'1',//子标签idchildKey:['0','0'],//子标签:'0-0',parent:'0',location:'2',value:'0-0',children:[],},{tagId:'2',//子标签idchildKey:['0','1'],label:'No.0-1',parent:'No.0',location:'2',value:'0-1',children:[],},],},]};},methods:{//递归查找peersfindSameTable(arr,i,casArr){if(i==casArr.length-1){returnarr;}else{returnthis.findTable(arr[casArr[i].substr(casArr[i].length-1,1)].children,(i+=1),casArr);}},//找到父findTable(arr,i,casArr){如果（我==casArr.length-1){letindex=casArr[i].substr(casArr[i].length-1,1);returnarr[index];}else{returnthis.findTable(arr[casArr[i].substr(casArr[i].length-1,1)].children,(i+=1),casArr);}},//递归表格数据(添加)find(arr,i){if(i==this.casArr.length-1){returnarr[this.casArr[i].substr(this.casArr[i].length-1,1)].children;}else{returnthis.find(arr[this.casArr[i].substr(this.casArr[i].length-1,1)].children,(i+=1));}},//发送表格数据(编辑)findSd(arr,i,casArr){if(i==casArr.length-1){letindex=casArr[i].substr(casArr[i].length-1,1);returnarr.splice(index,1,this.temp);}else{returnthis.findSd(arr[casArr[i].substr(casArr[i].length-1,1)].children,(i+=1),casArr);}},//递归查找同名findLable(arr,i,casArr){if(i==casArr.length-1){letindex=casArr[i].substr(casArr[i].length-1,1);returnarr[index];}else{returnthis.findLable(arr[casArr[i].substr(casArr[i].length-1,1)].children,(i+=1),casArr);}},//同步子名称useChildLable(arr){if(arr!==[]){arr.forEach((item)=>{item.parent=this.temp.label;});}},//发送表格数据(删除)findDel(arr,i,item){letcasArr=item.childKey;if(i==casArr.length-2){letindex=casArr[i].substr(casArr[i].length-1,1);arr[index].children.forEach((it,ix,arrs)=>{if(it==item){returnarrs.splice(ix,1);}});}else{returnthis.findDel(arr[casArr[i].substr(casArr[i].length-1,1)].children,(i+=1),item);}},//置空resetTemp(){this.temp={};},//打开添加handleCreate(){this.resetTemp();this.dialogFormVisible=true;this.dialogStatus='create';this.$nextTick(()=>{this.$refs['dataForm'].clearValidate();});},//添加createData(){this.$refs['dataForm'].validate((valid)=>{if(valid){if(this.sonStatus==false){this.temp.value=String(this.tableData.length);constobj=Object.assign({},this.temp);obj.children=[];obj.parent='';this.tableData.push(obj);this.$message({type:'success',message:'添加成功',});this.dialogFormVisible=false;}else{letarr=this.find(this.tableData,0);this.temp.value=String(this.casArr[this.casArr.length-1])+'-'+String(arr.length);deletethis.temp.children;constobj=Object.assign({},this.temp);obj.children=[];obj.childKey=[...this.casArr,String(arr.length)];obj.parent=this.findTable(this.tableData,0,this.casArr).label;if(this.temp.location==='2'){obj.location=String([...this.casArr,String(arr.length)].length);}arr.push(obj);this.$message({type:'success',message:'添加成功',});this.dialogFormVisible=false;}}else{returnfalse;}});},//打开更新handleUpdate(row){console.log(row);row.value.length!=1?(this.sonStatus=true):(this.sonStatus=false);this.temp=Object.assign({},行);//copyobjif(row.childKey){this.childKey=row.childKey;this.idx=row.childKey[row.childKey.length-1];}else{this.idx=row.value;}控制台.log(this.idx);this.dialogStatus='update';this.dialogFormVisible=true;this.$nextTick(()=>{this.$refs['dataForm'].clearValidate();});},//更新updateData(){this.$refs['dataForm'].validate((valid)=>{if(valid){if(this.temp.location==='1'){console.log(this.temp);this.tableData.splice(this.idx,1,this.temp);this.useChildLable(this.tableData[this.idx].children);this.$message({type:'成功',message:'编辑成功',});this.dialogFormVisible=false;}else{this.findSd(this.tableData,0,this.childKey);this.useChildLable(this.findLable(this.tableData,0,this.childKey).children);this.$message({type:'成功',message:'编辑成功',});this.dialogFormVisible=false;}}else{returnfalse;}});},//删除父节点deleteParent(item){this.tableData.forEach((it,ix,arrs)=>{if(it==item){returnarrs.splice(ix,1);}});},//删除deleteClick(item){this.$confirm(`这个操作会删除标签，继续吗?`,'prompt',{confirmButtonText:'OK',cancelButtonText:'Cancel',type:'warning',}).then(()=>{if(item.children.length!=0){this.$message.warning({message:'请删除子节点',duration:1000,});}else{++this.isResouceShow;if(item.value.length==1){this.deleteParent(item);this.$message({type:'success',message:'删除成功',});}else{this.findDel(this.tableData,0,item);this.$message({type:'success',message:'删除成功',});}}}).catch((err)=>{console.log(err);this.$message({type:'info',message:'删除取消',});});},//是否显示次要位置locationChange(v){if(v==2){this.sonStatus=true;}else{this.sonStatus=false;}},//获取二级位置locationgetCasVal(v){this.casArr=v;},},};代码可以直接使用，但需要注意的是必须提前安装好ElementUI框架。无限层次的核心算法是递归算法。掌握这一点，任何难题都可以解决。下面我们来回顾一下这个项目在前端的递归算法。递归只是一个调用自身的函数。递归算法中有两个条件：基线条件和递归条件。基线条件用于控制递归何时暂停，而递归条件用于控制调用本身的调用方式。最简单的例子是5的阶乘。varfunc=function(i){if(i===1){return1;}else{returni*func(i-1);}}func(5);这是递归算法的一个非常简单的实现，我们将反汇编上面的例子。//发送5*func(4);5*4*func(3);5*4*3*func(2);5*4*3*2*func(1);//返回5*4*3*2*1;5*4*3*2;5*4*6;5*24;120递归其实可以理解为递归和递归两种运算。可以这样类比，比如你在做一道数学题的时候，有一个知识点不懂，需要去查资料。但是通过查资料，发现这个知识点中还有一个你不懂的知识点，继续查找，直到没有你不懂的知识点，交接操作就完成了完全的。然后，你把已经检查过的知识点从头到尾复习一遍，返回操作就完成了。终于明白原来的知识点了。