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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
js实现微信分享代码
2020/10/11 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
Python处理文本换行符实例代码
2018/02/03 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python+mysql实现教务管理系统
2019/02/20 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python基于内置函数type创建新类型
2020/10/22 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
智能室内花园:Click & Grow
2021/01/29 全球购物
服装促销活动方案
2014/02/23 职场文书
安全生产计划书
2014/05/04 职场文书
销售人员求职信
2014/07/22 职场文书
师德师风学习材料
2014/12/19 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书