element树形组件tree节点增删改操作

1.目的：使用element树形组件tree懒加载方式显示数据，对数据进行增加、删除、修改，效果如下图：
2.使用tree懒加载方式，对数据操作，最重要的就是记住当前操作的节点，如果是新增、修改则刷新当前节点，如果是删除则是刷新父级节点

3.上代码，tree页面代码

<el-container v-loading="loading" class="area-manage page-container">
    <el-aside width="250px">
      <el-button type="text" @click="resetAll('')" class="allTree"  :underline="false"><i
        class="el-icon-caret-bottom"></i><span class="all-label" :class="{'selectAll':selectAll}">全部</span>
      </el-button>
      <el-tree
        class="tree-main"
        ref="dataTree"
        :props="props"
        :load="loadNode"
        lazy
        node-key="id"
        :highlight-current="true"
        :accordion="true"
        @node-click="clickLoad"
        empty-text="暂无数据"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="tree-label">
            {{ node.label }}
          </span>
        </span>
      </el-tree>
    </el-aside>
    <el-container style="margin-left: 10px">
      <el-header class="header-box" style="height: auto">
        <div class="header search-container">
          <div class="search-block">
            <el-input class="el-input"
                      size="mini"
                      clearable
                      suffix-icon="el-icon-search"
                      placeholder="请输入查询内容"
                      @change="filterList"
                      @keyup.enter.native="filterList"
                      v-model="searchData.name"/>
          </div>
          <div class="search-block">
            <el-button
              @click.native="editorLabel('', 'add')"
              size="mini"
              type="primary">
              添加
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table
          fit
          height="100%"
          size="small"
          border
          stripe
          ref="tableList"
          :data="pageData"
          tooltip-effect="light"
          style="width: 100%;"
          highlight-current-row >

          <el-table-column
            label="标签code"
            :show-overflow-tooltip='true'
            align="center">
            <template slot-scope="scope">
              <span class="">{{ scope.row.code }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="标签名称"
            :show-overflow-tooltip='true'
            align="center">
            <template slot-scope="scope">
              <span class="">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            align="center"
            column-key="action"
            :label="$t('userDeviceAbout.action')">
            <template slot-scope="scope">
            <span>
              <el-button size="mini" type="text" @click="editorLabel(scope.row, 'edit')">
                编辑
              </el-button>
              <el-button size="mini" type="text" @click="delList(scope.row)">
                删除
              </el-button>
            </span>
            </template>
          </el-table-column>
          <div slot="empty">
            <div style="font-size: 16px;font-weight: 500"></div>
          </div>
        </el-table>
      </el-main>
    </el-container>
    <editor-field ref="editorField"></editor-field>
    <el-dialog
      title=""
      width="600px"
      top="2vh"
      :visible.sync="categoryEdit"
      align="center"
      custom-class="category-editor-dialog"
      :close-on-click-modal="false"
      append-to-body>
      <div slot="title" class="dialog-title">
        <h3 class="title" v-if="type==='add'">添加</h3>
        <h3 class="title" v-else>编辑</h3>
      </div>
      <div class="body open-body">
        <el-form
          ref="editForms"
          v-loading="loading"
          :rules="rules"
          :model="editForms"
          label-position="right"
          @submit.native.prevent
          label-width="100px">
          <el-form-item class="el-form-item" prop="code" :label="'code'">
            <el-input class="el-input" v-model.trim="editForms.code"
                      clearable
                      :disabled="type==='edit'"
                      :placeholder="''">
            </el-input>
          </el-form-item>
          <el-form-item class="el-form-item" prop="name" :label="'名称'">
            <el-input class="el-input" v-model.trim="editForms.name"
                      clearable
                      :placeholder="''">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="button-group">
        <el-button class="top-btn default-btn" @click="categoryEdit=false" plain>{{$t('button.cancel')}}</el-button>
        <el-button @click="saveEditor"  type="primary" title="确定">{{$t('button.ok')}}</el-button>
      </div>
    </el-dialog>
  </el-container>

4.props安按照接口返回方式自己定义，例如：

 props: {
        label: 'name',
        children: 'data',
        isLeaf: 'leaf',
      },

5.js代码

let defaultForm = {
	code: '',
 	name: '',
}

export default {
data () {
    return {
      loading: true,
      categoryEdit: false,
      selectAll: true, // 默认选中全部
      searchData: {
        currPage: 1,
        pageSize: 20,
        name: ''
      },
      pageData: [],
      listTotal: 0,
      expandedNode: [], // 默认展开的节点
      currentNode: null, // 保存当前选中的节点
      nodeList: {}, // 用于保存节点的node信息
      rootNode: '', // 存储根节点
      props: {
        label: 'name',
        children: 'data',
        isLeaf: 'leaf',
      },
      editForms: deepClone(defaultForm),
      type: '',
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        code: [
          {required: true, message: '请输入code', trigger: 'blur'},
        ],
      },
    }
  },
  created () {
  },
  activated () {
  },
  mounted () {
    this.loading = false
  },
  methods: {
    // 查询组织架构
    loadNode (node, resolve) {
      this.loading = true
      this.loadCodes = node.data ? node.data.code : ''
      let params = {
        parentCode: this.loadCodes ? this.loadCodes : '1000',
        labelName: '',
        code: ''
      }
      if (this.loadCodes) {
        this.nodeList[this.loadCodes] = node
        this.selectAll = false
        this.currentNode = node.data
      } else {
        this.rootNode = node
      }
      // 获取数据
      getDataList(params).then(res => {
        let list = res.data || []
        this.loading = false
        list.forEach(item => {
          if (item.childCount <= 0) {
            item.leaf = true
          } else {
            item.leaf = ''
          }
        })
        resolve(list)
        this.filterList(list)
      })
    },
    // 点击节点时保存节点信息
    clickLoad (node, resolve) {
      this.currentNode = node
      this.nodeList[node.code] = resolve
      this.selectAll = false
      this.filterList()
    },
    // 点击根节点
    resetAll () {
      this.rootNode.loaded = false
      this.rootNode.expand()
      this.selectAll = true
      this.currentNode = ''
    },
    // 添加节点
    editorLabel (data, type) {
      this.resetForm()
      this.loading = false
      this.type = type
      // deepClone 这个方法是自定义的深克隆
      this.editForms = deepClone(defaultForm)
      if (data) {
        this.editForms = deepClone(data)
        let resCode = this.editForms.code.split('/')
        this.editForms.code = resCode[resCode.length - 1]
        if (data.childCount && data.childCount > 0) {
          let text = '该标签下有子标签，确定修改吗？'
          this.$confirm(text, '提示', {})
            .then(() => {
              this.categoryEdit = true
            }).catch(() => {})
        } else {
          this.categoryEdit = true
        }
      } else {
        this.categoryEdit = true
      }
    },
    resetForm () {
      this.editForms = deepClone(defaultForm)
      if (this.$refs['editForms']) {
        this.$refs['editForms'].resetFields()
      }
    },
    // 删除节点
    delList (data) {
      let _this = this
      let text = '若删除则分类下的子标签会一并删除，确定删除吗？'
      this.$confirm(text, '提示', {})
        .then(() => {
          this.loading = true
          delData(data.code).then(res => {
            this.loading = false
            this.$message.success('删除成功')
            if (_this.currentNode && _this.currentNode.code) {
              _this.nodeList[this.currentNode.code].loaded = false
              _this.nodeList[this.currentNode.code].expand()
            } else {
              _this.resetAll()
            }
          }).catch(err => {
            this.$message.warning(this.$t(err.msg || err.message))
            this.loading = false
          })
        }).catch(() => {})
    },
    saveEditor () {
      this.$refs['editForms'].validate((valid) => {
        if (valid) {
          let params = deepClone(this.editForms)
          this[this.type](params)
        }
      })
    },
    add (params) {
      this.loading = true
      let _this = this
      let code = ''
      if (this.currentNode && this.currentNode.code) {
        code = this.currentNode.code + '/' + params.code
      } else {
        code = '1000/' + params.code
      }
      addData(code, params).then(res => {
        this.loading = false
        this.$message.success('添加成功')
        this.categoryEdit = false
        if (_this.currentNode && _this.currentNode.code && _this.nodeList[_this.currentNode.code]) {
          _this.nodeList[_this.currentNode.code].loaded = false
          _this.nodeList[_this.currentNode.code].expand()
        } else {
          this.resetAll()
        }
      }).catch(reason => {
        this.loading = false
        this.$message.error(this.$t(reason.msg || reason.message))
      })
    },
    edit (params) {
      this.loading = true
      let code = ''
      let _this = this
      if (this.currentNode && this.currentNode.code) {
        code = this.currentNode.code + '/' + params.code
      } else {
        code = '1000/' + params.code
      }
      editData(code, params).then(res => {
        this.loading = false
        this.$message.success('编辑成功')
        if (_this.currentNode && _this.currentNode.code) {
          _this.nodeList[_this.currentNode.code].loaded = false
          _this.nodeList[_this.currentNode.code].expand()
        } else {
          _this.resetAll()
        }
        this.categoryEdit = false
      }).catch(reason => {
        this.loading = false
        this.$message.error(this.$t(reason.msg || reason.message))
      })
    },
    // 发起筛选
    filterList (data) {
      // this.pageData = data
      let _code = this.currentNode ? this.currentNode.code : '1000'
      getDataList({parentCode: _code, labelName: this.searchData.name, code: this.searchData.name, pinyin: this.searchData.name}).then(res => {
        this.pageData = res.data || []
      })
    },
  },
  }

功能完成，项目一些信息删除了，所以页面根据自己需求更改