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的内存泄漏
Mar 04 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
比较node.js和Deno
Apr 27 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操作JSON格式数据的实现代码
2011/12/24 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
vue 过滤器filter实例详解
2018/03/14 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
python实现TF-IDF算法解析
2018/01/02 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
伊索寓言教学反思
2014/05/01 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
公司授权委托书范文
2014/08/02 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
新闻稿格式范文
2015/07/18 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
python周期任务调度工具Schedule使用详解
2021/11/23 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
MySQL数据库 任意ip连接方法
2022/05/20 MySQL