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


Posted in Javascript onAugust 31, 2020

首先是页面部分

<template>
 <el-tree
  id="userMtree"
  ref="tree"
  :data="treeData"
  node-key="id"
  :render-content="renderContent"
  :expand-on-click-node="false"
  @node-click="nodeClick"
  :default-expanded-keys='expandedKey'
 ></el-tree>
</template>

下面是js部分

export default {
 props:['treeDataObj','isUserMgt'],//父级传值 与判断哪个tree
 data () {
  return {
   treeData:[],//tree数据
   expandedKey:[],//展开节点
   checkedID:''//选中节点
  }
 },
 mounted(){
  this.treeData=this.treeDataObj.treeData
  let userMtree=document.getElementById('userMtree')
  this.$nextTick(()=>{
   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 =
     ev.target.parentNode.parentNode.querySelector("input") ||
     ev.target.parentElement.parentElement.querySelector("input");
 
    !$input ? "" : $input.focus();//获取焦点
   });
  },
//失焦事件
  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",
     message: "内容不能为空!"
    });
   }else{//赋值value
    data.label = $input.value;
    data.isEdit = false;
   }
  },
//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)}/>
      {
       this.isUserMgt?<i class="el-icon-circle-plus-outline" 
        on-click={() => this.append( data)}></i>:''        
      }
     </div>
    </span>
   );
  },
  showOrEdit(data) {
   if (data.isEdit) {
    return (
     <input type="text" class="node_labe" value={data.label} 
      on-blur={ev => this.edit_sure(ev, data)} />
    );
   } else {
    return <span class="node_labe">{data.label}</span>;
   }
  },
//新增节点
  append(data) {
   const newChild = { id: new Date().getTime(), label: '', children: [],
      isEdit: true };
//判断是否有子节点
   if (!data.children) {
    this.$set(data, 'children', []);
   }
   data.children.push(newChild);
   this.expandedKey=[data]//展开点击节点
  },
//移除节点
  nodeDelete(node, data) {
   const parent = node.parent
   const children = parent.data.children || parent.data
   const index = children.findIndex(d => d.id === data.id)
   children.splice(index, 1)
  },
//点击节点 移除默认选中节点
  nodeClick(data){
   let userMtree=document.getElementById('userMtree')
   userMtree.firstElementChild.classList.remove("is-current");
   this.checkedID=data.id
   console.log(data)
   this.$emit('emitClickNode',data)
  }
 }
}

补充知识:vue前端基础之组件封装(树组件的封装附带增删改查方法)

组件封装的意义

组件封装的意义其实很好理解,对于一段复用性极高的代码,就需要进行组件封装以减少冗余代码。

树的封装

<template>
 <el-aside width="180px">
  <h3 class="el-icon-folder" style="margin: 0px">
   {{ name }}
  </h3>
  <el-tree
   ref="tree"
   :data="setTree"
   :props="defaultProps"
   node-key="id"
   style="margin-top:20px"
   accordion
   @node-contextmenu="rihgtClick"
  >
   <span slot-scope="{ node, data }" class="span-ellipsis">
    <span v-show="!node.isEdit">
     <span v-show="data.children && data.children.length >= 1">
      <span :title="node.label">{{ node.label }}</span>
     </span>
     <span v-show="!data.children || data.children.length == 0">
      <span :title="node.label"> {{ node.label }}</span>
     </span>
    </span>
   </span>
  </el-tree>
  <!--鼠标右键点击出现页面-->
  <div v-show="menuVisible">
   <el-menu
    id="rightClickMenu"
    class="el-menu-vertical"
    text-color="#000000"
    active-text-color="#000000"
    @select="handleRightSelect"
   >
    <el-menu-item index="1" :hidden="showQuery" class="menuItem">
     <span slot="title">查询</span>
    </el-menu-item>
    <el-menu-item index="2" :hidden="showSave" class="menuItem">
     <span slot="title">添加</span>
    </el-menu-item>
    <el-menu-item index="3" :hidden="showUpdate" class="menuItem">
     <span slot="title">修改</span>
    </el-menu-item>
    <el-menu-item index="4" :hidden="showDelete" class="menuItem">
     <span slot="title">删除</span>
    </el-menu-item>
   </el-menu>
  </div>
 </el-aside>
</template>
<script>
export default {
 name: 'Tree',
 props: {
  treeData: {
   type: Array,
   required: true
  },
  treeName: {
   type: String,
   required: true,
   default: '树'
  },
  isHiddenQuery: {
   type: Boolean,
   required: false,
   default: true
  },
  isHiddenSave: {
   type: Boolean,
   required: false,
   default: false
  },
  isHiddenUpdate: {
   type: Boolean,
   required: false,
   default: false
  },
  isHiddenDelete: {
   type: Boolean,
   required: false,
   default: false
  }
 },
 data() {
  return {
   setTree: this.treeData,
   showQuery: this.isHiddenQuery,
   showSave: this.isHiddenSave,
   showUpdate: this.isHiddenUpdate,
   showDelete: this.isHiddenDelete,
   name: this.treeName,
   TREEDATA: {
    DATA: null,
    NODE: null
   },
   isLoadingTree: true, // 是否加载节点树
   objectID: null,
   defaultProps: {
    children: 'children',
    label: 'name'
   },
   menuVisible: this.menuVisible
  }
 },
 watch: {
  treeData(val) {
   this.setTree = val
  },
  treeName(val) {
   this.name = val
  }
 },
 methods: {
  handleRightSelect(key) {
   if (key === '1') {
    this.$emit('NodeQuery', this.TREEDATA)
    this.menuVisible = false
   } else if (key === '2') {
    this.$emit('NodeAdd', this.TREEDATA)
    this.menuVisible = false
   } else if (key === '3') {
    this.$emit('NodeUpdate', this.TREEDATA)
    this.menuVisible = false
   } else if (key === '4') {
    this.$emit('NodeDel', this.TREEDATA)
    this.menuVisible = false
   }
  },
  rihgtClick(event, object, value, element) {
   if (this.objectID !== object.id) {
    this.objectID = object.id
    this.menuVisible = true
    this.TREEDATA.DATA = object
    this.TREEDATA.NODE = value
   } else {
    this.menuVisible = !this.menuVisible
   }
   document.addEventListener('click', e => {
    this.menuVisible = false
   })
   const menu = document.querySelector('#rightClickMenu')
   /* 菜单定位基于鼠标点击位置 */
   menu.style.left = event.clientX - 180 + 'px'
   menu.style.top = event.clientY - 100 + 'px'
   menu.style.position = 'absolute' // 为新创建的DIV指定绝对定位
   menu.style.width = 120 + 'px'
  }
 }
}

</script>

<style lang="scss" scoped>
.span-ellipsis {
 width: 100%;
 overflow: hidden;
 margin-left: 10px;
 white-space: nowrap;
 text-overflow: ellipsis;
}
</style>

对于组件的引用

import tree from '@/components/Tree/index'
export default {
 components: { tree },
 data() {}
 ......

组件的使用

<tree
 :tree-data="setTree"
 :tree-name="treeName"
 @NodeAdd="NodeAdd"
 @NodeUpdate="NodeUpdate"
 @NodeDel="NodeDel"
/>

setTree是要给树赋予的值,treeName是树的标题(可不要),后面是需要的树的右键操作我启用了增删改

效果图

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

子组件向父组件传值

handleRightSelect(key) {
 if (key === '1') {
  this.$emit('NodeQuery', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '2') {
  this.$emit('NodeAdd', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '3') {
  this.$emit('NodeUpdate', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '4') {
  this.$emit('NodeDel', this.TREEDATA)
  this.menuVisible = false
 }
}

以上这篇element-ui tree结构实现增删改自定义功能代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
JS排序之选择排序详解
Apr 08 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 #Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 #Javascript
JS遍历树层级关系实现原理解析
Aug 31 #Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 #Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 #Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 #Javascript
vue中v-model对select的绑定操作
Aug 31 #Javascript
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
javascript 闭包
2011/09/15 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python Trie树实现字典排序
2014/03/28 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python的exec、eval使用分析
2017/12/11 Python
python 实现登录网页的操作方法
2018/05/11 Python
pygame实现简易飞机大战
2018/09/11 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
车贷收入证明范本
2014/01/09 职场文书
服务员自我评价
2014/01/25 职场文书
素质拓展感言
2014/01/29 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
师德承诺书
2015/01/20 职场文书
打架检讨书范文
2015/01/27 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers