本文介绍了VUE饿了么树形控件添加增删改功能的示例代码，分享给大家，具体如下：
element-ui树形控件：地址
在原文档中有个案例是有新增和删除功能，但是后来发现其修改的数据并不能直接影响到树形数据，所以采用了 render-content 的API重新写了个组件。
写个开发的步骤，所以文章比较长emmm
大致效果如图：
1.省市API
在网上复制了个省市的list，有两个属性是新增的
- isEdit ：控制编辑状态
- maxexpandId ：为现下id的最大值
maxexpandId: 95,treelist: [{
id: 1,name: "北京市",ProSort: 1,remark: "直辖市",pid: '',isEdit: false,children: [{
id: 35,name: "朝阳区",pid: 1,remark: '',children: []
}]
}{...}]
}
2.el-tree Component基本
咱们一步步来，先写个饿了么的组件
同时引入API和节点渲染的组件
然后搭建好基础
添加个渲染的method
that.handleAdd(s,n)),nodeEdit: ((s,n) => that.handleEdit(s,nodeDel: ((s,n) => that.handleDelete(s,n))
}
});
},handleAdd(s,n){//
增加节点
console.log(s,n)
},handleEdit(s,n){//编辑节点
console.log(s,handleDelete(s,n){//
删除节点
console.log(s,n)
}
}
3.tree_render Component基本
渲染组件：
{{DATA.name}}
添加好几个按钮（element-ui自带icon：地址）对应的方法：
删除
this.$emit('nodeDel',n)
}
}
}
4.改
我们用isEdit来切换input和span的显示状态，首先加个input：
{{DATA.name}}
编辑的时候按钮同时消失，那么什么时候编辑完成呢？
- 编辑完按enter键=》监听input的enter输入
- 点击其他节点=》input失焦-blur=》编辑时自动聚焦-focus
- 点击当前节点范围
当以上三点发生一项，节点对应的data都要isEdit = false;
1、enter键
添加方法：
2、focus or blur
后来发现第一次编辑时能让input聚焦，点击第二个input就不起作用了，加了autofocus属性也同样如此。所以我们要在点击编辑icon的时候，用原生的input autofocus。
修改方法：
{
this.$refs['treeInput'+d.id].$refs.input.focus()
})
this.$emit('nodeEdit',n)
}
3、当前节点点击
采用el-tree已有的API——node-click
添加methods：
问题来了，如果在编辑状态下点击此节点也同样会影响input，这就无法进入编辑，所以要阻止input事件冒泡：
添加methods：
4、v-show代替v-if
这里有个新的问题，当用户经常编辑修改，v-if模板的开销更高，所以改用v-show。而后者不支持template模板，所以要适当调整一下位置：
{{DATA.name}}
5.增
新增节点 =》添加一条数据
- 新增的同时展开父节点
- 是否考虑无限新增
=6){
this.$message.error("最多只
支持五级！")
return false;
}
//
添加数据
d.children.push({
id: ++this.maxexpandId,name: '新增节点',pid: d.id,children: []
});
//展开节点
if(!n.expanded){
n.expanded = true;
}
}
新增节点字体加粗 =》给节点添加一个class =》 如何判断是否新增？
我们有一个参数maxexpandId
给tree_render添加一个prop：
根据id判断：
{{DATA.name}}
.tree-expand .tree-label.tree-new{
font-weight:600;
}
6.删
跟新增同义：删除节点 =》删除一条数据
{
let list = n.parent.data.children || n.parent.data,//节点同级数据，顶级节点时无children
_index = 99999;//要
删除的index
list.map((c,i) => {
if(d.id == c.id){
_index = i;
}
})
let k = list.splice(_index,1);
//console.log(_index,k)
this.$message.success("
删除成功！")
}
let isDel = () => {
that.$confirm("是否
删除此节点？","
提示",{
confirmButtonText: "确认",cancelButtonText: "取消",type: "warning"
}).then(() => {
delNode()//此处可通过ajax做
删除操作
}).catch(() => {
return false;
})
}
//新增节点直接
删除，否则要通过请求数据
删除
d.id > this.non_maxexpandId ? delNode() : isDel()
}
}
7.拓展
还有一些特别的需求，例如：
1、点击高亮的时候显示icon
.el-tree-node__content .tree-btn,.expand-tree .el-tree-node__content:hover .tree-btn{
display: inline-block;
}
2、添加顶级节点
添加按钮：
添加methods：
3、默认展开树形第一级
{
this.defaultExpandKeys.push(a.id)
});
this.isLoadingTree = true;
},}
8.github
还有些具体的样式都放在github了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/35759.html
