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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
jquery 模板的应用示例
Nov 12 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 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
星际玩家的三大定律
2020/03/04 星际争霸
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
js 目录列举函数
2008/11/06 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
详解js类型判断
2018/05/22 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue实现简单图片上传
2020/06/30 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python 的类、继承和多态详解
2017/07/16 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python实现PID算法及测试的例子
2019/08/08 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python元组的概念知识点
2019/11/19 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python新手如何理解循环加载模块
2020/05/29 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
中海讯通笔试题
2015/09/15 面试题
校园自助餐厅的创业计划书
2013/12/26 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
报关专员求职信范文
2014/02/22 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript