element-ui tree结构实现增删改自定义功能代码结构实现增删改自定义功能代码
主要介绍了element-ui tree结构实现增删改自定义功能代码，具有很好的参考价值，希望对大家有所帮助。一起
跟随小编过来看看吧
首先是页面部分首先是页面部分
<template>
<el-tree
id="userMtree"
ref="tree"
:data="treeData"
node-key="id"
:render-content="renderContent"
:expand-on-click-node="false"
@node-click="nodeClick"
:default-expanded-keys='expandedKey'
></el-tree>
</template>
下面是下面是js部分部分
export default {
props:['treeDataObj','isUserMgt'],//父级传值 与判断哪个tree
data () {
return {
treeData:[],//tree数据
expandedKey:[],//展开节点
checkedID:''//选中节点
}
},
mounted(){
this.treeData=this.treeDataObj.treeData
let userMtree=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) {
return false;
} else if($input.value==''){
this.$message({
type: "info",
message: "内容不能为空!"
});
}else{//赋值value
data.label = $input.value;
data.isEdit = false;
}
},
//react方法 插入代码
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span class="tree_node_label">{this.showOrEdit(data)}</span>
<div class="tree_node_op">
<i class="el-icon-edit" on-click={ev => this.nodeEdit(ev, store, data)}/>
<i class="el-icon-remove-outline"
on-click={() => this.nodeDelete(node, data)}/>
{
评论0