最近在根據需求，需要用到樹形控制元件，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,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,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,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,arr.name) //同步重新整理
   this.addDialog = false
   this.$notify.success({
    message:'更新成功',duration: 2000
   })
  }).catch(() => {
   this.addDialog = false
  })
 }

到此這篇關於element el-tree元件的動態載入、新增、更新節點的實現的文章就介紹到這了,更多相關element el-tree動態載入、新增、更新節點內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！