element tree 动态可新增编辑节点

网上找了好多element-ui tree动态可编辑节点得例子，看来好多 官网也只是有新增和删除得 可是没有关于编辑节点名称得例子，我也网上找了好多例子，发现大家都是有选择的展示出自己得代码，都没有完全将自己的代码展示出来 拿过去也根本没法跑。基本就是完全不能用的状态。没办法，我只能自己动手了，以下是全部element-ui tree 动态编辑树的例子，只要引入了element主键的项目 把以下代码复制粘贴过去就可以使用了。

 

 

1. <template>
2.     <div v-loading="isLoading" class="comp-tree">
3.         <el-button class="comp-tr-top" 
4.             type="primary" 
5.             size="small" 
6.             @click="handleAddTop">添加顶级节点</el-button>
7.         <!-- tree -->
8.         <el-tree ref="SlotTree"
9.             :data="setTree"
10.             :props="defaultProps"
11.             :expand-on-click-node="false"
12.             highlight-current
13.             :node-key="NODE_KEY">
14.                 <div class="comp-tr-node" slot-scope="{ node, data }">
15.                     <!-- 编辑状态 -->
16.                     <template v-if="node.isEdit">
17.                         <el-input v-model="data.name" 
18.                             autofocus
19.                             size="mini"
20.                             :ref="'slotTreeInput'+data[NODE_KEY]"
21.                             @blur.stop="handleInput(node, data)"
22.                             @keyup.enter.native="handleInput(node, data)"></el-input>
23.                     </template>
24.  
25.                     <!-- 非编辑状态 -->
26.                     <template v-else>
27.                         <!-- 名称： 新增节点增加class（is-new） -->
28.                         <span :class="[data[NODE_KEY] < NODE_ID_START ? 'is-new' : '', 'comp-tr-node--name']">
29.                             {{ node.label }}
30.                         </span>
31.                         
32.                         <!-- 按钮 -->
33.                         <span class="comp-tr-node--btns">
34.                             <!-- 新增 -->
35.                             <el-button icon="el-icon-plus" 
36.                                 size="mini"
37.                                 circle 
38.                                 type="primary"
39.                                 @click="handleAdd(node, data)"></el-button>
40.  
41.                             <!-- 编辑 -->
42.                             <el-button icon="el-icon-edit" 
43.                                 size="mini"
44.                                 circle 
45.                                 type="info"
46.                                 @click="handleEdit(node, data)"></el-button>
47.  
48.                             <!-- 删除 -->
49.                             <el-button icon="el-icon-delete" 
50.                                 size="mini"
51.                                 circle 
52.                                 type="danger"
53.                                 @click="handleDelete(node, data)"></el-button>
54.                         </span>
55.                     </template>
56.                 </div>
57.             </el-tree>
58.     </div>
59. </template>
60.  
61. <script>
62. export default{
63.     name: 'component-tree',
64.     data(){
65.         return {
66.             isLoading: false,// 是否加载
67.             setTree: [],// tree数据
68.             NODE_KEY: 'id',// id对应字段
69.             MAX_LEVEL: 3,// 设定最大层级
70.             NODE_ID_START: 0,// 新增节点id，逐次递减
71.             startId: null,
72.             defaultProps: {// 默认设置
73.                 children: 'children',
74.                 label: 'name'
75.             },
76.             initParam: {// 新增参数
77.                 name: '新增节点',
78.                 pid: 0,
79.                 children: []
80.             },
81.         }
82.     },
83.     created(){
84.         // 初始值
85.         this.startId = this.NODE_ID_START
86.     },
87.     methods: {
88.         handleDelete(_node, _data){// 删除节点
89.             console.log(_node, _data)
90.             // 判断是否存在子节点
91.             if(_data.children && _data.children.length !== 0){
92.                 this.$message.error("此节点有子级，不可删除！")
93.                 return false;
94.             }else{
95.                 // 删除操作
96.                 let DeletOprate = () => {
97.                     this.$nextTick(() => {
98.                         if(this.$refs.SlotTree){
99.                             this.$refs.SlotTree.remove(_data)
100.                             this.$message.success("删除成功！")
101.                         }
102.                     })
103.                 }
104.                 // 二次确认
105.                 let ConfirmFun = () => {
106.                     this.$confirm("是否删除此节点？","提示",{
107.                         confirmButtonText: "确认",
108.                         cancelButtonText: "取消",
109.                         type: "warning"
110.                     }).then(() => {
111.                         DeletOprate()
112.                     }).catch(() => {})
113.                 }
114.                 // 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
115.                 _data[this.NODE_KEY] < this.NODE_ID_START ? DeletOprate() : ConfirmFun()
116.             }
117.         },
118.         handleInput(_node, _data){// 修改节点
119.             console.log(_node, _data)
120.             // 退出编辑状态
121.             if(_node.isEdit){
122.                 this.$set(_node, 'isEdit', false)
123.             }
124.         },
125.         handleEdit(_node, _data){// 编辑节点
126.             console.log(_node, _data)
127.             // 设置编辑状态
128.             if(!_node.isEdit){
129.                 this.$set(_node, 'isEdit', true)
130.             }
131.             // 输入框聚焦
132.             this.$nextTick(() => {
133.                 if(this.$refs['slotTreeInput'+_data[this.NODE_KEY]]){
134.                     this.$refs['slotTreeInput'+_data[this.NODE_KEY]].$refs.input.focus()
135.                 }
136.             })
137.         },
138.         handleAdd(_node, _data){// 新增节点
139.             console.log(_node, _data)
140.             // 判断层级
141.             if(_node.level >= this.MAX_LEVEL){
142.                 this.$message.warning("当前已达到"+ this.MAX_LEVEL + "级，无法新增！")
143.                 return false;
144.             }
145.             // 参数修改
146.             let obj = JSON.parse(JSON.stringify(this.initParam));// copy参数
147.             obj.pid = _data[this.NODE_KEY];// 父id
148.             obj[this.NODE_KEY] = --this.startId;// 节点id：逐次递减id
149.             // 判断字段是否存在
150.             if(!_data.children){
151.                 this.$set(_data, 'children', [])
152.             }
153.             // 新增数据
154.             _data.children.push(obj)
155.             // 展开节点
156.             if(!_node.expanded){
157.                 _node.expanded = true
158.             }
159.         },
160.         handleAddTop(){// 添加顶部节点
161.             let obj = JSON.parse(JSON.stringify(this.initParam));// copy参数
162.             obj[this.NODE_KEY] = --this.startId;// 节点id：逐次递减id
163.             this.setTree.push(obj)
164.         }
165.     }
166. }
167. </script>
168.  
169. <style lang="scss">
170.     /* common */
171.     // 显示按钮
172.     .show-btns{
173.         opacity: 1;
174.     }
175.     /* common end */
176.     .comp-tree{
177.         width: 100%;
178.         max-width: 700px;
179.         max-height: 80vh;
180.         padding: 2em;
181.         overflow: auto;
182.         // 顶部按钮
183.         .comp-tr-top{
184.             width: 100px;
185.             margin-bottom: 2em;
186.         }
187.         // 自定义节点
188.         .comp-tr-node{
189.             // label
190.             .comp-tr-node--name{
191.                 display: inline-block;
192.                 line-height: 40px;
193.                 min-height: 40px;
194.                 // 新增
195.                 &.is-new{
196.                     font-weight: bold;
197.                 }
198.             }
199.             // button
200.             .comp-tr-node--btns{
201.                 margin-left: 10px;
202.                 opacity: 0;
203.                 transition: opacity .1s;
204.                 .el-button{
205.                     transform: scale(0.8);// 缩小按钮
206.                     & + .el-button{
207.                         margin-left: -1px;
208.                     }
209.                 }
210.             }
211.         }
212.         // 高亮显示按钮
213.         .is-current{
214.             &>.el-tree-node__content{
215.                 .comp-tr-node--btns{
216.                     @extend .show-btns;
217.                 }
218.             }
219.         }
220.         // 悬浮显示按钮
221.         .el-tree-node__content{
222.             &:hover{
223.                 .comp-tr-node--btns{
224.                     @extend .show-btns;
225.                 }
226.             }
227.         }
228.     }
229. </style>