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 相关文章推荐
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 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
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
初识Laravel
2014/10/30 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
JS日历 推荐
2006/12/03 Javascript
通过JAVAScript实现页面自适应
2007/01/19 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
NET程序员上机面试题
2015/05/23 面试题
党员一帮一活动总结
2014/07/08 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
党校学习心得体会范文
2014/09/09 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
交通安全横幅标语
2014/10/07 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
英文投诉信格式
2015/07/03 职场文书
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js