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

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

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

符合需求,啦啦啦

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

<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
}

然后 在更行后台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动态加载、新增、更新节点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • ElementUI中el-tree节点的操作的实现

    其实tree的有些方法用起来是很方便的, this.$refs.tree.getCheckedKeys():这个原生态的方法.官方文档上说的是,返回一个数组.有了这个方法,我们就可以得到选中的每个节点的id,拿到了id,那所有的问题就迎刃而解了. 废话不多说,直接上代码 html <div id="app"> <el-row> <el-button @click="checkedKeys">得到节点id</el-button

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

    最近在根据需求,需要用到树形控件,ele 的封装了树形控件正好拿来用,用的途中遇到一些问题就总结下,哈哈哈 说正事,我需要动态的加载出整个树形结构,刚好就有 符合需求,啦啦啦 用的时候出现问题了,我要如何把后台返回个我的数据加载到表里呢,上菜... <template> <el-tree empty-text="暂无数据" :expand-on-click-node="false" :props="defaultProps" :

  • Vue加载组件、动态加载组件的几种方式

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示: //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const i

  • 动态加载权限管理模块中的Vue组件

    本文我们主要来聊聊登录以及组件的动态加载. 登录状态保存 当用户登录成功之后,需要将当前用户的登录信息保存在本地,方便后面使用.具体实现如下: 登录成功保存数据 在登录操作执行成功之后,通过commit操作将数据提交到store中,核心代码如下: this.postRequest('/login', { username: this.loginForm.username, password: this.loginForm.password }).then(resp=> { if (resp &

  • Angular使用动态加载组件方法实现Dialog的示例

    网上的文章和教程基本上写到组件加载完成就没了!没了?!而且都是只能存在一个dialog,想要打开另一个dialog必须先销毁当前打开的dialog,之后看过 material 的实现方式,怪自己太蠢看不懂源码,就只能用自己的方式来实现一个dialog组件了 Dialog组件的目标:可以同时存在多个Dialog,可销毁指定Dialog,销毁后html中无组件残留且提供回调 动态加载组件的实现方式有两种,angular4.0版本之前使用ComponentFactoryResolver来实现,4.0之

  • vue3动态加载对话框的方法实例

    目录 简介 常规方式使用对话框 异步动态加载 使用方式 TestModal.vue 使用结果 动态操作对话框的实现 DzModalService.ts main.ts 总结 简介 介绍使用vue3的异步组件动态管理对话框组件,简化对话框组件使用方式.本文使用的是vue3.typescript.element_plus完成的示例. 常规方式使用对话框 一般情况下,使用对话框组件,会使用v-model进行双向绑定,通过visible变量控制对话框的显示和关闭.常规方式有一个弊端,自定义组件中使用<e

  • vue2.* element tabs tab-pane 动态加载组件操作

    一.重要部分 1. 注意 <component :is=item.content></component> :表明模板 <el-tab-pane v-for="(item) in editableTabs" :key="item.name" :label="item.title" :name="item.name" > <component :is=item.content>&l

  • vue+element树组件 实现树懒加载的过程详解

    一.页面样式 二.数据库 三.前端页面代码 <template> <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-tree> </template> <script> export default { data () { return { props: { label: 'name', children: 'zones',

  • 解决element ui cascader 动态加载回显问题

    elementui是基于vue2.0的组件库,专为开发人员.设计人员而设计的:可以快速搭建项目框架,集成了界面样式,先给大家介绍下element ui cascader 动态加载回显问题解决方法. props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候,cascader却不显示了.只要重新加载下cascader组件就行. <el-cascader v-if="isShowAddressInfo&

  • Angular.js实现动态加载组件详解

    前言 有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件:这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT. 动态加载组件 下面以一个Step组件为示例,完成一个3个步骤的示例展示,并且可以通过URL user?step=step-one 的变化显示第N个步骤的内容. 1.resolveComponentFactory 首先,还是需要先创建动态加载组件模块. import { Component, Input, Vie

  • C#动态加载组件后如何在开发环境中调试详解

    动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定目录下的dll一次性用Assembly.Load加载进来.只要把指定目录变成从网络加载,或者加载指定目录前先检查网络上的是否有新版本.这就简单做成个最简单版本的热更新. 多数网上的资料就是然后就没有然后了.很多人就发现产品是通过动态加载组件了.但开发人员根本无法调试啊.不能调试就意味着开发难度大啊.

随机推荐