快捷導(dǎo)航

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

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

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

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

說(shuō)正事，我需要?jiǎng)討B(tài)的加載出整個(gè)樹(shù)形結(jié)構(gòu)，剛好就有

符合需求，啦啦啦

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

<template>
	<el-tree
   empty-text="暫無(wú)數(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 標(biāo)準(zhǔn)樣式了

部分

<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: '請(qǐng)輸入基礎(chǔ)類(lèi)型名',trigger: 'blur'}]
    },
    pid: null, // 基礎(chǔ)類(lèi)型得父級(jí)id
    flag: null, //操作標(biāo)志位
    node: {}, // tree 節(jié)點(diǎn)對(duì)象
    nodedata: {} 
   }
  },
  created(){
  },
  methods: {
   // 加載樹(shù)結(jié)點(diǎn)
   loadNode(node, resolve) {
    // 如果是頂級(jí)的父節(jié)點(diǎn)
    if (node.level === 0) {
     // 查找頂級(jí)對(duì)象
     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é)點(diǎn)id找尋下一級(jí)的所有節(jié)點(diǎn) 
     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>

動(dòng)態(tài)的加載樹(shù)形數(shù)據(jù) 這里通過(guò)對(duì)ele 提供的方法
這里對(duì) el-tree 的樣式做了些許的改變
這個(gè)看個(gè)人需要了

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

動(dòng)態(tài)加載節(jié)點(diǎn)數(shù)據(jù)，這里通過(guò) ele 提供的 loadNode（）方法可以根據(jù)個(gè)人需要改寫(xiě)

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

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

然后在更行后臺(tái)api 成功后通過(guò) Vue.$set() 刷新子節(jié)點(diǎn)數(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組件的動(dòng)態(tài)加載、新增、更新節(jié)點(diǎn)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element el-tree動(dòng)態(tài)加載、新增、更新節(jié)點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: