VUE饿了么树形控件添加增删改功能的示例代码

本文介绍了VUE饿了么树形控件添加增删改功能的示例代码，分享给大家，具体如下：

element-ui树形控件：地址

在原文档中有个案例是有新增和删除功能，但是后来发现其修改的数据并不能直接影响到树形数据，所以采用了 render-content 的API重新写了个组件。

写个开发的步骤，所以文章比较长emmm

大致效果如图：

1.省市API

在网上复制了个省市的list，有两个属性是新增的

• isEdit ：控制编辑状态
• maxexpandId ：为现下id的最大值

rush:js;"> export default{

maxexpandId: 95,treelist: [{
id: 1,name: "北京市",ProSort: 1,remark: "直辖市",pid: '',isEdit: false,children: [{
id: 35,name: "朝阳区",pid: 1,remark: '',children: []
}]
}{...}]
}

2.el-tree Component基本

咱们一步步来，先写个饿了么的组件

rush:xhtml;">

同时引入API和节点渲染的组件

rush:js;"> import TreeRender from '@/components/tree_render' import api from '@/resource/api'

然后搭建好基础

rush:js;"> data(){ return{ maxexpandId: api.maxexpandId,//新增节点开始id non_maxexpandId: api.maxexpandId,//新增节点开始id(不更改) isLoadingTree: false,//是否加载节点树 setTree: api.treelist,//节点树数据 defaultProps: { children: 'children',label: 'name' },defaultExpandKeys: [],//默认展开节点列表 } },

添加个渲染的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基本

渲染组件：

rush:xhtml;">

添加好几个按钮（element-ui自带icon：地址）对应的方法：

rush:js;"> export default{ props: ['NODE','DATA','STORE'],methods: { nodeAdd(s,n){//新增 this.$emit('nodeAdd',s,n) },nodeEdit(s,n){//编辑 this.$emit('nodeEdit',nodeDel(s,n){//删除 this.$emit('nodeDel',n) } } }

4.改

我们用isEdit来切换input和span的显示状态，首先加个input：

rush:xhtml;">

编辑的时候按钮同时消失，那么什么时候编辑完成呢？

• 编辑完按enter键=》监听input的enter输入
• 点击其他节点=》input失焦-blur=》编辑时自动聚焦-focus
• 点击当前节点范围

当以上三点发生一项，节点对应的data都要isEdit = false;

1、enter键

rush:xhtml;">

添加方法：

rush:js;"> //tree_render component methods: { nodeEditPass(s,n){ d.isEdit = false; } }

2、focus or blur

rush:xhtml;">

后来发现第一次编辑时能让input聚焦，点击第二个input就不起作用了，加了autofocus属性也同样如此。所以我们要在点击编辑icon的时候，用原生的input autofocus。

修改方法：

{ this.$refs['treeInput'+d.id].$refs.input.focus() }) this.$emit('nodeEdit',n) }

3、当前节点点击

采用el-tree已有的API——node-click

rush:xhtml;"> node-click="handleNodeClick">

添加methods：

rush:js;"> //el-tree component methods: { handleNodeClick(d,n,s){//点击节点 d.isEdit = false;//放弃编辑状态 } }

问题来了，如果在编辑状态下点击此节点也同样会影响input，这就无法进入编辑，所以要阻止input事件冒泡：

rush:xhtml;">

添加methods：

rush:js;"> //tree_render component methods: { nodeEditFocus(){} }

4、v-show代替v-if

这里有个新的问题，当用户经常编辑修改，v-if模板的开销更高，所以改用v-show。而后者不支持template模板，所以要适当调整一下位置：

rush:xhtml;">

5.增

新增节点 =》添加一条数据

1. 新增的同时展开父节点
2. 是否考虑无限新增

=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：

rush:js;"> //el-tree component renderContent(h,store}){//加载节点 let that = this; return h(TreeRender,{ props: { ... maxexpandId: that.non_maxexpandId },on: {...} }); }

根据id判断：

rush:js;"> //tree_render component props: ['NODE','STORE','maxexpandId']

rush:css;"> {{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、添加顶级节点

添加按钮：

rush:xhtml;"> 添加顶级节点

添加methods：

rush:js;"> //el-tree component methods: { handleAddTop(){ this.setTree.push({ id: ++this.maxexpandId,children: [] }) } }

3、默认展开树形第一级

{ this.defaultExpandKeys.push(a.id) }); this.isLoadingTree = true; },}

8.github

还有些具体的样式都放在github了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。