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

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

主要介绍了element-ui tree结构实现增删改自定义功能代码，具有很好的参考价值，希望对大家有所帮助。一起

跟随小编过来看看吧

首先是页面部分首先是页面部分

<template>

<el-tree

id="userMtree"

ref="tree"

></el-tree>

</template>

下面是下面是js部分部分

export default {

props:['treeDataObj','isUserMgt'],//父级传值 与判断哪个tree

data () {

return {

treeData:[],//tree数据

expandedKey:[],//展开节点

checkedID:''//选中节点

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 =

//失焦事件

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",

},

//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)}/>