快捷導(dǎo)航

element el-tree組件的動態(tài)加載、新增、更新節(jié)點的實現(xiàn)

更新時間：2020年02月27日 11:31:45 作者：大臉貓QAQ

這篇文章主要介紹了element el-tree組件的動態(tài)加載、新增、更新節(jié)點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近在根據(jù)需求，需要用到樹形控件，ele 的封裝了樹形控件正好拿來用，用的途中遇到一些問題就總結(jié)下，哈哈哈

說正事，我需要動態(tài)的加載出整個樹形結(jié)構(gòu)，剛好就有

符合需求，啦啦啦

用的時候出現(xiàn)問題了，我要如何把后臺返回個我的數(shù)據(jù)加載到表里呢，上菜。。。

<template>
	<el-tree
   empty-text="暫無數(shù)據(jù)"
   :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'
    },
    //新增相關(guān)
    addDialog:false,
    addForm: {},
    addRules:{
     name:[{required: true,message: '請輸入基礎(chǔ)類型名',trigger: 'blur'}]
    },
    pid: null, // 基礎(chǔ)類型得父級id
    flag: null, //操作標志位
    node: {}, // tree 節(jié)點對象
    nodedata: {} 
   }
  },
  created(){
  },
  methods: {
   // 加載樹結(jié)點
   loadNode(node, resolve) {
    // 如果是頂級的父節(jié)點
    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 {
     // 根據(jù)父節(jié)點id找尋下一級的所有節(jié)點 
     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>

動態(tài)的加載樹形數(shù)據(jù) 這里通過對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>

動態(tài)加載節(jié)點數(shù)據(jù)，這里通過 ele 提供的 loadNode（）方法可以根據(jù)個人需要改寫

這里我是用彈出框進行信息的管理
實現(xiàn)動態(tài)的后臺數(shù)據(jù)更新和前臺顯示的刷新，

addDialogShow(node,data,flag) {
	this.node = node // 這里對nodetree 進行了預(yù)先存儲
  this.nodedata = data
}

然后在更行后臺api 成功后通過 Vue.$set() 刷新子節(jié)點數(shù)據(jù)

let arr = Object.assign({}, this.addForm) //獲取輸入框輸入的數(shù)據(jù)

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

到此這篇關(guān)于element el-tree組件的動態(tài)加載、新增、更新節(jié)點的實現(xiàn)的文章就介紹到這了,更多相關(guān)element el-tree動態(tài)加載、新增、更新節(jié)點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: