el-tree 树形控件懒加载异步请求数据，并且修改和删除数据

1、 增加节点新增和删除按钮 render-content

2、新增和编辑过后刷新节点 this.$refs.treeRef.getNode(id)

3、数据对于是否为叶子节点的判定  isLeaf（仅在指定了 lazy 属性的情况下生效）

<template>
  <div>
    <el-button type="primary" @click="treeDialog=true">编辑</el-button>
    <el-dialog title="编辑类型" :visible.sync="treeDialog" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" width="50%">
      <span>类型编辑</span>
      <el-tree ref="treeRef" :props="props" :load="tagsChange" lazy node-key="id" show-checkbox :render-content="renderContent" />
      <div style="text-align:center;margin-top:20px;">
        <el-button @click="treeDialog=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getAllTag, addTags, deleteTags, reviseTags } from '../../../api/notice/noticeBoard'
export default {
  name: 'TagTree',
  props: {
    treeDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      pid: '',
      props: {
        value: 'id',
        label: 'name',
        pid: 'pid',
        isLeaf: 'isLeaf'
      },
      tags: [{
        id: 1,
        name: 'name1',
        hasChirld: true
      }, {
        id: 2,
        name: 'name2'
      }],
      tagsChirld: [
        {
          id: 11,
          name: 'name11',
          pid: 1
        }, {
          id: 12,
          name: 'name12',
          pid: 1
        }
      ]
    }
  },
  watch: {},
  created () {
    this.getTags()
  },
  methods: {
    renderTree (id) { // 刷新数据
      const node = this.$refs.treeRef.getNode(id)
      if (node) {
        node.loaded = false
        node.expand()
      }
    },
    renderContent (h, { node, data, store }) { // 增加节点新增和删除按钮
      debugger
      if (node.level === 1) {
        return (
          <span>
            <span>{node.label}</span>
            <span class='tree-btnBox'>
              <el-button type='text' class='tree-add-btn' on-click={() => this.append(data)}>增加</el-button>
            </span>
          </span>
        )
      } else {
        return (
          <span>
            <span>{node.label}</span>
            <span class='tree-btnBox'>
              <el-button type='text' class='tree-edit-btn' on-click={() => this.editTag(data)}>编辑</el-button>
              <el-button type='text' class='tree-del-btn' on-click={() => this.remove(node, data)}>删除</el-button>
            </span>
          </span>
        )
      }
    },
    add (param) {
      // return new Promise((resolve, reject) => {
      //   addTags(param).then(res => {
      //     resolve(res)
      //   }).catch(err => {
      //     reject(err)
      //   })
      // })
    },
    edit (param) {
      // return new Promise((resolve, reject) => {
      //   reviseTags(param).then(res => {
      //     resolve(res)
      //   }).catch(err => {
      //     reject(err)
      //   })
      // })
    },
    delete (param) {
      // return new Promise((resolve, reject) => {
      //   deleteTags(param).then(res => {
      //     resolve(res)
      //   }).catch(err => {
      //     reject(err)
      //   })
      // })
    },
    append (data) {
      // this.$prompt('请输入类型名字', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   inputPattern: /^.+$/,
      //   inputErrorMessage: '类型名字不能为空'
      // }).then(({ value }) => {
      //   var param = {
      //     name: value,
      //     pid: data.id
      //   }
      //   this.add(param).then((res) => {
      //     this.renderTree(data.id)
      //     this.$message({
      //       type: 'success',
      //       message: '新增成功'
      //     })
      //   }).catch(err => {
      //     this.$message({
      //       type: 'error',
      //       message: err
      //     })
      //   })
      // }).catch(() => {

      // })
      // 发送新增请求成功后，重新渲染父节点
      this.renderTree(data.id)
    },
    editTag (data) {
      this.$prompt('类型名字', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.+$/,
        inputValue: data.name,
        inputErrorMessage: '类型名字不能为空'
      }).then(({ value }) => {
        // var param = {
        //   id: data.id,
        //   name: value
        // }
        // this.edit(param).then((res) => {
        //   this.renderTree(data.pid)// 重新渲染父节点
        //   this.$message({
        //     type: 'success',
        //     message: '修改成功'
        //   })
        // }).catch(err => {
        //   this.$message({
        //     type: 'error',
        //     message: err
        //   })
        // })
        // 发送编辑请求成功后，重新渲染父节点
        this.renderTree(data.pid)
      }).catch(() => {

      })
    },
    remove (node, data) {
      const parent = node.parent
      const children = parent.childNodes || parent.data
      const index = children.findIndex(d => d.data.id === data.id)
      children.splice(index, 1)
      // this.delete(data.id).then((res) => {
      //   const parent = node.parent
      //   const children = parent.childNodes || parent.data
      //   const index = children.findIndex(d => d.data.id === data.id)
      //   children.splice(index, 1)
      //   this.$message({
      //     type: 'success',
      //     message: '删除成功'
      //   })
      // }).catch(err => {
      //   this.$message({
      //     type: 'error',
      //     message: err
      //   })
      // })
    },
    // 获取类型并且处理数据
    getTags (data) {
      let arr = data.map((item) => {
        item.isLeaf = true
        if (item.hasChirld) {
          item.isLeaf = false
        }
        return item
      })
      return arr
    },
    // load 加载子树数据的方法，仅当 lazy 属性为true 时生效
    tagsChange (node, resolve) {
      if (node.level === 0) {
        let arr = this.getTags(this.tags)
        return resolve(arr)
      } else if (node.level >= 1) {
        let arr = this.getTags(this.tagsChirld)
        return resolve(arr)
      }
    }

  }
}
</script>

<style  >
.tree-btnBox {
  padding-left: 12px;
}
.tree-add-btn {
  color: #409eff;
}
.tree-edit-btn {
  color: #67c23a;
}
.tree-del-btn {
  color: #f56c6c;
}
</style>