element-ui tree结构实现增删改自定义功能代码

2023-07-17 14:13:04 84

首先是页面部分

下面是js部分

exportdefault{
props:['treeDataObj','isUserMgt'],//父级传值与判断哪个tree
data(){
return{
treeData:[],//tree数据
expandedKey:[],//展开节点
checkedID:''//选中节点
}
},
mounted(){
this.treeData=this.treeDataObj.treeData
letuserMtree=document.getElementById('userMtree')
this.$nextTick(()=>{
userMtree.firstElementChild.classList.add("is-current");//添加选中类名
})
this.checkedID=this.treeData[0].id//默认选中第一个
},
methods:{
//编辑
nodeEdit(ev,store,data){
data.isEdit=true;
this.$nextTick(()=>{//得到input
const$input=
ev.target.parentNode.parentNode.querySelector("input")||
ev.target.parentElement.parentElement.querySelector("input");

!$input?"":$input.focus();//获取焦点
});
},
//失焦事件
edit_sure(ev,data){
const$input=
ev.target.parentNode.parentNode.querySelector("input")||
ev.target.parentElement.parentElement.querySelector("input");
if(!$input){
returnfalse;
}elseif($input.value==''){
this.$message({
type:"info",
message:"内容不能为空!"
});
}else{//赋值value
data.label=$input.value;
data.isEdit=false;
}
},
//react方法插入代码
renderContent(h,{node,data,store}){
return(

{this.showOrEdit(data)}

this.nodeEdit(ev,store,data)}/>
this.nodeDelete(node,data)}/>
{
this.isUserMgt?this.append(data)}>:''
}

); }, showOrEdit(data){ if(data.isEdit){ return( this.edit_sure(ev,data)}/> ); }else{ return{data.label}; } }, //新增节点 append(data){ constnewChild={id:newDate().getTime(),label:'',children:[], isEdit:true}; //判断是否有子节点 if(!data.children){ this.$set(data,'children',[]); } data.children.push(newChild); this.expandedKey=[data]//展开点击节点 }, //移除节点 nodeDelete(node,data){ constparent=node.parent constchildren=parent.data.children||parent.data constindex=children.findIndex(d=>d.id===data.id) children.splice(index,1) }, //点击节点移除默认选中节点 nodeClick(data){ letuserMtree=document.getElementById('userMtree') userMtree.firstElementChild.classList.remove("is-current"); this.checkedID=data.id console.log(data) this.$emit('emitClickNode',data) } } }

补充知识：vue前端基础之组件封装（树组件的封装附带增删改查方法）

组件封装的意义

组件封装的意义其实很好理解，对于一段复用性极高的代码，就需要进行组件封装以减少冗余代码。

树的封装





.span-ellipsis{
width:100%;
overflow:hidden;
margin-left:10px;
white-space:nowrap;
text-overflow:ellipsis;
}

对于组件的引用

importtreefrom'@/components/Tree/index'
exportdefault{
components:{tree},
data(){}
......

组件的使用

setTree是要给树赋予的值，treeName是树的标题（可不要），后面是需要的树的右键操作我启用了增删改

效果图

子组件向父组件传值

handleRightSelect(key){
if(key==='1'){
this.$emit('NodeQuery',this.TREEDATA)
this.menuVisible=false
}elseif(key==='2'){
this.$emit('NodeAdd',this.TREEDATA)
this.menuVisible=false
}elseif(key==='3'){
this.$emit('NodeUpdate',this.TREEDATA)
this.menuVisible=false
}elseif(key==='4'){
this.$emit('NodeDel',this.TREEDATA)
this.menuVisible=false
}
}

以上这篇element-uitree结构实现增删改自定义功能代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

element-ui tree结构实现增删改自定义功能代码

热门推荐

随机推荐