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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python求最大值最小值方法总结
2019/06/25 Python
微信小程序python用户认证的实现
2019/07/29 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python处理PDF与CDF实例
2020/02/26 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
css3选择器基本介绍
2014/12/15 HTML / CSS
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
保护水资源的标语
2014/06/17 职场文书
团日活动总结怎么写
2014/06/25 职场文书
员工家属慰问信
2015/03/24 职场文书
廉政承诺书范文
2015/04/28 职场文书
大学军训通讯稿
2015/07/18 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript