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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
详解python中@的用法
2019/03/27 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python可视化实现KNN算法
2019/10/16 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
开工典礼策划方案
2014/05/23 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
2015年度村委会工作总结
2015/04/29 职场文书