本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下:
element-ui树形控件:地址
在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件。
写个开发的步骤,所以文章比较长emmm
大致效果如图:
1.省市API
在网上复制了个省市的list,有两个属性是新增的
export default{ maxexpandId: 95, treelist: [{ id: 1, name: "北京市", ProSort: 1, remark: "直辖市", pid: '', isEdit: false, children: [{ id: 35, name: "朝阳区", pid: 1, remark: '', isEdit: false, children: [] }] }{...}] }
2.el-tree Component基本
咱们一步步来,先写个饿了么的组件
<template> <el-tree ref="expandMenuList" class="expand-tree" v-if="isLoadingTree" :data="setTree" node-key="id" highlight-current :props="defaultProps" :expand-on-click-node="false" :render-content="renderContent" :default-expanded-keys="defaultExpandKeys"></el-tree> </template> <!-- * highlight-current :为了点击时节点高亮 * expand-on-click-node : 只能箭头控制树形的展开收缩 * render-content : 节点渲染方式 * default-expanded-keys :默认展开节点 -->
同时引入API和节点渲染的组件
import TreeRender from '@/components/tree_render' import api from '@/resource/api'
然后搭建好基础
data(){ return{ maxexpandId: api.maxexpandId,//新增节点开始id non_maxexpandId: api.maxexpandId,//新增节点开始id(不更改) isLoadingTree: false,//是否加载节点树 setTree: api.treelist,//节点树数据 defaultProps: { children: 'children', label: 'name' }, defaultExpandKeys: [],//默认展开节点列表 } },
添加个渲染的method
methods: { renderContent(h,{node,data,store}){ let that = this;//指向vue return h(TreeRender,{ props: { DATA: data,//节点数据 NODE: node,//节点内容 STORE: store,//完整树形内容 }, on: {//绑定方法 nodeAdd: ((s,d,n) => that.handleAdd(s,d,n)), nodeEdit: ((s,d,n) => that.handleEdit(s,d,n)), nodeDel: ((s,d,n) => that.handleDelete(s,d,n)) } }); }, handleAdd(s,d,n){//增加节点 console.log(s,d,n) }, handleEdit(s,d,n){//编辑节点 console.log(s,d,n) }, handleDelete(s,d,n){//删除节点 console.log(s,d,n) } }
3.tree_render Component基本
渲染组件:
<template> <span class="tree-expand"> <span class="tree-label"> <span>{{DATA.name}}</span> </span> <span class="tree-btn"> <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i> <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i> <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i> </span> </span> </template>
添加好几个按钮(element-ui自带icon:地址)对应的方法:
export default{ props: ['NODE', 'DATA', 'STORE'], methods: { nodeAdd(s,d,n){//新增 this.$emit('nodeAdd',s,d,n) }, nodeEdit(s,d,n){//编辑 this.$emit('nodeEdit',s,d,n) }, nodeDel(s,d,n){//删除 this.$emit('nodeDel',s,d,n) } } }
4.改
我们用isEdit来切换input和span的显示状态,首先加个input:
<!-- tree_render component --> <template> <span class="tree-expand"> <span class="tree-label" v-if="DATA.isEdit"> <el-input class="edit" size="mini" :ref="'treeInput'+DATA.id" v-model="DATA.name"></el-input> </span> <template v-else> <span class="tree-label"> <span>{{DATA.name}}</span> </span> <span class="tree-btn" v-show="!DATA.isEdit"> <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i> <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i> <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i> </span> </template> </span> </template>
编辑的时候按钮同时消失,那么什么时候编辑完成呢?
当以上三点发生一项,节点对应的data都要isEdit = false;
1、enter键
<!-- tree_render component --> <el-input @keyup.enter.native="nodeEditPass(STORE,DATA,NODE)"></el-input>
添加方法:
//tree_render component methods: { nodeEditPass(s,d,n){ d.isEdit = false; } }
2、focus or blur
<!-- tree_render component --> <el-input @blur="nodeEditPass(STORE,DATA,NODE)"></el-input>
后来发现第一次编辑时能让input聚焦,点击第二个input就不起作用了,加了autofocus属性也同样如此。所以我们要在点击编辑icon的时候,用原生的input autofocus。
修改方法:
//tree_render component nodeEdit(s,d,n){//编辑 d.isEdit = true; this.$nextTick(() => { this.$refs['treeInput'+d.id].$refs.input.focus() }) this.$emit('nodeEdit',s,d,n) }
3、当前节点点击
采用el-tree已有的API——node-click
<!-- el-tree component --> <el-tree @node-click="handleNodeClick"></el-tree>
添加methods:
//el-tree component methods: { handleNodeClick(d,n,s){//点击节点 d.isEdit = false;//放弃编辑状态 } }
问题来了,如果在编辑状态下点击此节点也同样会影响input,这就无法进入编辑,所以要阻止input事件冒泡:
<!-- tree_render component --> <el-input @click.stop.native="nodeEditFocus"></el-input>
添加methods:
//tree_render component methods: { nodeEditFocus(){} }
4、v-show代替v-if
这里有个新的问题,当用户经常编辑修改,v-if模板的开销更高,所以改用v-show。而后者不支持template模板,所以要适当调整一下位置:
<template> <span class="tree-expand"> <span class="tree-label" v-show="DATA.isEdit"> <el-input class="edit" size="mini" autofocus v-model="DATA.name" :ref="'treeInput'+DATA.id" @click.stop.native="nodeEditFocus" @blur="nodeEditPass(STORE,DATA,NODE)" @keyup.enter.native="nodeEditPass(STORE,DATA,NODE)"></el-input> </span> <span v-show="!DATA.isEdit"> <span>{{DATA.name}}</span> </span> <span class="tree-btn" v-show="!DATA.isEdit"> <i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i> <i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i> <i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i> </span> </span> </template>
5.增
新增节点 =》添加一条数据
//el-tree component handleAdd(s,d,n){//增加节点 console.log(s,d,n) if(n.level >=6){ this.$message.error("最多只支持五级!") return false; } //添加数据 d.children.push({ id: ++this.maxexpandId, name: '新增节点', pid: d.id, isEdit: false, children: [] }); //展开节点 if(!n.expanded){ n.expanded = true; } }
新增节点字体加粗 =》给节点添加一个class =》 如何判断是否新增?
我们有一个html" target="_blank">参数maxexpandId
给tree_render添加一个prop:
//el-tree component renderContent(h,{node,data,store}){//加载节点 let that = this; return h(TreeRender,{ props: { ... maxexpandId: that.non_maxexpandId }, on: {...} }); }
根据id判断:
//tree_render component props: ['NODE', 'DATA', 'STORE', 'maxexpandId']
<!-- tree_render component --> <span v-show="!DATA.isEdit" :class="[DATA.id > maxexpandId ? 'tree-new tree-label' : 'tree-label']" :ref="'treeLabel'+DATA.id"> <span>{{DATA.name}}</span> </span> .tree-expand .tree-label.tree-new{ font-weight:600; }
6.删
跟新增同义:删除节点 =》删除一条数据
handleDelete(s,d,n){//删除节点 console.log(s,d,n) let that = this; //有子级不删除 if(d.children && d.children.length !== 0){ this.$message.error("此节点有子级,不可删除!") return false; }else{ //删除操作 let delNode = () => { 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
.expand-tree .is-current>.el-tree-node__content .tree-btn, .expand-tree .el-tree-node__content:hover .tree-btn{ display: inline-block; }
2、添加顶级节点
添加按钮:
<!-- el-tree component --> <el-button @click="handleAddTop">添加顶级节点</el-button>
添加methods:
//el-tree component methods: { handleAddTop(){ this.setTree.push({ id: ++this.maxexpandId, name: '新增节点', pid: '', isEdit: false, children: [] }) } }
3、默认展开树形第一级
//el-tree component mounted(){ this.initExpand() }, methods: { initExpand(){ //isLoadingTree用意也是在此 this.setTree.map((a) => { this.defaultExpandKeys.push(a.id) }); this.isLoadingTree = true; }, }
8.github
还有些具体的样式都放在github了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍开发Vue树形组件的示例代码,包括了开发Vue树形组件的示例代码的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Vue树形组件的示例代码,分享给大家,具体如下: 使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的: 使用时,假如父组件app使用到了menubar组件,那么data中需要定义一下items数据,例 : 里面的click事件是定义了,当在工
本文向大家介绍基于 Vue 的树形选择组件的示例代码,包括了基于 Vue 的树形选择组件的示例代码的使用技巧和注意事项,需要的朋友参考一下 本文介绍了基于 Vue 的树形选择组件。分享给大家,具体如下: 系统要求:Vue 2 基本特性 完美的多级联动效果 支持无限多的分级 有 全选、半选、不选 三种状态 截图展示 代码如下: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多
本文向大家介绍vue实现树形结构样式和功能的实例代码,包括了vue实现树形结构样式和功能的实例代码的使用技巧和注意事项,需要的朋友参考一下 一、主要运用element封装的控件并封装成组件运用,如图所示 代码如图所示: 下面是子组件的代码: 主要难点是:current传值问题,所以current绑定在父组件 父组件中的值和方法: 当然在运行npm时是需要安装npm inst
本文向大家介绍vue loadmore组件上拉加载更多功能示例代码,包括了vue loadmore组件上拉加载更多功能示例代码的使用技巧和注意事项,需要的朋友参考一下 最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯。 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: 然后就是业务
本文向大家介绍Yii针对添加行的增删改查操作示例,包括了Yii针对添加行的增删改查操作示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Yii针对添加行的增删改查操作。分享给大家供大家参考,具体如下: 效果图: 控制器: 视图层: 更多关于Yii相关内容感兴趣的读者可查看本站专题:《Yii框架入门及常用技巧总结》、《php优秀开发框架总结》、《smarty模板入门基础教程》、《php面向
本文向大家介绍vue递归组件实战之简单树形控件实例代码,包括了vue递归组件实战之简单树形控件实例代码的使用技巧和注意事项,需要的朋友参考一下 1、递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2、树形控件基本结构及样式 3、组件目录及数据结构 目录结构 vue-tree VueTree.vue TreeItem.vue 树