element el-tree 树形图增删改查-逐级操作，懒加载

业务：每一层级单独获取操作 

关键词：updateKeyChildren（更新子节点）

思路：

        添加：

                1.先获取当前节点子集数组

let children = this.node.childNodes.map(function(item) {
        return item.data
      })

                2.把新增数据（调用接口结束后）加到children中然后更新节点

children.unshift(data)
this.$refs.tree.updateKeyChildren(this.node.data.id, children)

        修改：

第一级直接调用接口刷新，

下级先获取父级(parentNode)id,然后通过接口获取数据（调用接口结束后）通过updateKeyChildren（更新节点）  this.$refs.tree.updateKeyChildren(父id, 获取的数据)

1.调用接口获取数据  2.修改dom

dom

<div class="leftArea">
      <el-tree
        accordion
        :props="{ label: 'caption' }"
        :data="tableDataTree" // 接口获取树 可直接获取第一层
        node-key="id"  // 标识必须有
        :load="middleLoadNode" // 动态,懒加载--子集调用接口获取
        @node-click="nodeClick"
        lazy // 懒加载
        ref="tree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => append(data, node)">
              添加
            </el-button>
            <el-button type="text" size="mini" @click="() => edit(data)">
              修改
            </el-button>
            <el-button type="text" size="mini" @click="() => remove(data.id)">
              删除
            </el-button>
          </span>
        </span></el-tree
      >
    </div>

 js

设置动态懒加载

    async middleLoadNode(tree, resolve) {
      // 懒加载中间树第一层后面所有层
      if (tree.data.id != undefined) {
        const params = {
          parentid: tree.data.id,  // 父id
          column: 'stepno', //排序字段
          order: 'ASC' // 
        }  // 根据情况传参
        getDicWorkProcess(params) // 获取子节点数据接口
          .then(res => {
            console.log(res)
            return resolve(res.result.records)  // 返回数据到树里面
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    append(row, node) { // 新增按钮
      this.type = 'middleTree'
      this.node = node //此项获取node其他参数为业务数据--用于更新tree 获取node.id
      this.middleData = row
      this.moduelType = 'middle:add' // 接口标识
      this.dialogVisible = true
      this.mainForm = addVo()
      this.mainForm.parentid = row.id // 获取父id
      this.mainForm.stationcode = row.stationcode
      this.dialogTitle = '流程添加'
    },
    edit(row) { // 修改按钮
      this.type = 'middleTree'
      this.moduelType = 'middle:edit' // 接口标识
      this.dialogVisible = true
      this.mainForm = row
      this.dialogTitle = '流程修改' // 右侧向点修改
    },

    async submit() {
      let children = this.node.childNodes.map(function(item) {
        return item.data
      })
      const fn = {
        'middle:edit': editDicWorkProcess,
        'middle:add': addDicWorkProcess
      }
      const query = this.mainForm
      const { message, result: data, success } = await fn[this.moduelType](query)
      if (!success) return this.$alert(message)
      if (success) {
        if (this.state == 'edit') {
          if (this.mainForm.steplevel == 1) {
            this.initTree() // 第一级直接刷新接口
          } else if (this.mainForm.steplevel != 1) { // 其他下级 先获取其父级id调接口
            const params = { 
              parentid: this.parentNode.data.id,
              column: 'stepno', //排序字段
              order: 'ASC' // ASC正序DESC倒序默认倒序
            }
            const { result: res } = await getDicWorkProcess(params)
            console.log(res) // 获取的数据替换父级的子集（自己）
             // 修改
            this.$refs.tree.updateKeyChildren(this.parentNode.data.id, res.records)
          }
        } else if (this.state == 'append') {
          if (data) {
            children.unshift(data)
            this.$refs.tree.updateKeyChildren(this.node.data.id, children)
          }
        }
        this.close()
        this.$alert(message)
      }
    },
    remove(id) { // 删除
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDicWorkProcess({ id: id }).then(res => {
          if (res.success) {
            this.$message.success('删除成功!')
            const { tree } = this.$refs
            tree.remove(id)
          } else {
            this.$message.warning('删除失败!')
          }
        })
      })
    },

问题请留言