element el-tree组件的动态加载、新增、更新节点的实现


Posted in Javascript onFebruary 27, 2020

最近在根据需求,需要用到树形控件,ele 的封装了树形控件正好拿来用,用的途中遇到一些问题就总结下,哈哈哈

说正事,我需要动态的加载出整个树形结构,刚好就有

element el-tree组件的动态加载、新增、更新节点的实现

符合需求,啦啦啦

用的时候出现问题了,我要如何把后台返回个我的数据加载到表里呢,上菜。。。

<template>
	<el-tree
   empty-text="暂无数据"
   :expand-on-click-node="false"
   :props="defaultProps"
   :load="loadNode"
   node-key="id"
   lazy>
   <div class="custom-tree-node" slot-scope="{ node, data }">
    <div class="fl"><i class="el-icon-menu"></i>{{ node.label }}</div>
    <div class="fr">
     <el-button
      type="primary"
      size="mini"
      @click="() => addDialogShow(node, data, 0)">
      新增
     </el-button>
     <el-button
      type="primary"
      plain 
      size="mini"
      @click="() => addDialogShow(node, data, 1)">
      更新
     </el-button>
     <!-- <el-button
      disabled
      type="danger"
      size="mini"
      @click="() => remove(node, data)">
      删除
     </el-button> -->
    </div>
   </div>
  </el-tree>
</template>

el-tree 标准样式了

部分

<script>
 import { typeList, addtype, updatetype, deltype } from '@/api/baseType'

 export default {
  data() {
   return {
    defaultProps: {
      id: "Id",
      label: 'Name',
      children: 'children'
    },
    //新增相关
    addDialog:false,
    addForm: {},
    addRules:{
     name:[{required: true,message: '请输入基础类型名',trigger: 'blur'}]
    },
    pid: null, // 基础类型得父级id
    flag: null, //操作标志位
    node: {}, // tree 节点对象
    nodedata: {} 
   }
  },
  created(){
  },
  methods: {
   // 加载树结点
   loadNode(node, resolve) {
    // 如果是顶级的父节点
    if (node.level === 0) {
     // 查找顶级对象
     typeList(node.level).then(res => {
      if (res.Data) {
       return resolve(res.Data)
      } else {
       this.$message.error(res.Msg)
      }
     }).catch(() => {
      let data = []
      return resolve(data)
     })
    } else {
     // 根据父节点id找寻下一级的所有节点 
     typeList(node.data.Id).then(res => {
      if (res.Data) {
       return resolve(res.Data)
      } else {
       this.$message.error(res.Msg)
      }
     }).catch(() => {
      let data = []
      return resolve(data)
     })
    }
   },
   remove(node, data) {
    console.log(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);
   },
   //新增
   addDialogShow(node,data,flag) {
    this.node = node //
    this.nodedata = data
    if(flag === 0) {
     this.addDialog = true
     this.pid = data.Id
     this.flag = 0
    }
    if(flag === 1) {
     this.addDialog = true
     this.pid = data.Id
     this.addForm.name = data.Name
     this.flag = 1
    }
   },
   addSubmit(flag) {
    this.$refs.addForm.validate((valid) => {
     if(valid){
      this.listLoading = true
      let arr = Object.assign({}, this.addForm)
      console.log(flag)
      if(flag === 0) {
       let data = {
        pid: this.pid,
        name: arr.name
       }
       // 新增 api
       addtype(data).then(() => {
        typeList(data.pid).then(res => {
         let id = res.Data[0].Id 
         const newChild = { id: id, label: arr.name, children: [] };
         if (!this.nodedata.children) {
          this.$set(nodedata, 'children', []);
         }
         this.nodedata.children.push(newChild)
         this.addDialog = false
         this.$notify.success({
          message:'新增成功',
          duration: 2000
         })
        })
       }).catch(() => {
        this.addDialog = false
       })
      }
      if(flag === 1) {
       let data = {
        name: arr.name
       }
       updatetype(this.pid,data).then(res => {
        this.$set(this.node.data, 'Name',arr.name)
        this.addDialog = false
        this.$notify.success({
         message:'更新成功',
         duration: 2000
        })
       }).catch(() => {
        this.addDialog = false
       })
      }
     }
    })
   }
  }
 }
</script>

动态的加载树形数据 这里通过对ele 提供的方法
这里对 el-tree 的样式做了些许的改变
这个看个人需要了

<style lang="less" scoped>
 .el-tree-node__content {
  line-height: 50px;
  .custom-tree-node {
   width: 100%;
   display: block;
   .fl {
    float: left;
    line-height: 31px;
   }
   .fr {
    float: right;
    margin-right: 50px;
   }
  }
 }
</style>

动态加载节点数据,这里通过 ele 提供的 loadNode() 方法 可以根据个人需要改写

这里我是用弹出框进行信息的管理
实现动态的后台数据更新 和 前台显示的刷新,

addDialogShow(node,data,flag) {
	this.node = node // 这里对nodetree 进行了预先存储
  this.nodedata = data
}

element el-tree组件的动态加载、新增、更新节点的实现

然后 在更行后台api 成功后 通过 Vue.$set() 刷新子节点数据

let arr = Object.assign({}, this.addForm) //获取输入框输入的数据

 updatetype(this.pid,data).then(res => {
   this.$set(this.node.data, 'Name',arr.name) //同步刷新
   this.addDialog = false
   this.$notify.success({
    message:'更新成功',
    duration: 2000
   })
  }).catch(() => {
   this.addDialog = false
  })
 }

到此这篇关于element el-tree组件的动态加载、新增、更新节点的实现的文章就介绍到这了,更多相关element el-tree动态加载、新增、更新节点内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 #Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 #Javascript
BootStrap前端框架使用方法详解
Feb 26 #Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 #Javascript
javascript 数组精简技巧小结
Feb 26 #Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 #Javascript
jquery实现直播视频弹幕效果
Feb 25 #jQuery
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python实现Adapter模式实例代码
2018/02/09 Python
Django框架实现的分页demo示例
2019/05/25 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
导致python中import错误的原因是什么
2020/07/01 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
法定代表人授权委托书
2014/04/04 职场文书
大气污染防治方案
2014/05/19 职场文书
公司委托书格式
2014/08/01 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
新郎新娘答谢词
2015/01/04 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL