element tree 无刷新 添加 编辑 删除 移动

效果如图 数据请求后台后 前端无刷新自行处理

Rec 0002

联合 this.$refs.tree.getNode(id).data 使用 可达到在任意指定的节点 进行 添加 编辑 删除 移动

如果各位配合this.$refs.tree.getNode(id).data还是做不出来的话，我只能献上我写的不优美的代码了（以下为核心代码）

<el-tree
                  v-loading="loading_tree"
                  ref="tree"
                  :data="orgData"
                  :filter-node-method="filterNode"
                  :props="defaultProps"
                  :check-strictly="true"
                  :expand-on-click-node="true"
                  style="height:450px;overflow:auto;white-space:nowrap;text-overflow: ellipsis;"
                  node-key="id"
                  highlight-current
                  @node-expand="orgClickHandle"
                  @node-click="showItem"
                >
                  <span
                    slot-scope="{ node ,data }"
                    class="custom-tree-node"
                  >
                    <div style="display:flex;flex-direction:row">
                      <div>
                        <el-tooltip v-if=" data.open" :content="$t('programModel.open')" class="item" effect="dark" placement="bottom-start">
                          <i style="color:#409EFF" class="el-icon-view"></i>
                        </el-tooltip>
                        <!-- <el-tooltip v-if=" data.payModel > 1 && payModelList[data.payModel]" :content="payModelList[data.payModel].name" class="item" effect="dark" placement="bottom-start">
                          <i style="color:#409EFF" class="el-icon-money"></i>
                        </el-tooltip> -->
                        <el-tooltip v-if="data.detail" :content="$t('material.isChildren')" class="item" effect="dark" placement="bottom-start">
                          <i style="color:#409EFF" class="el-icon-document"></i>
                        </el-tooltip>
                      </div>
                      <div v-if="node.label!=''" :title="node.label">
                        {{ node.label }}
                      </div>
                    </div>
                  </span>
                </el-tree>




// 这个是关键 是弹出框提交时emit到父级VUE的函数 --新增 修改 

changeList(beanValue) {
      const newCh = { ...beanValue }
      var obj = {}

      // 新增编辑 父级是顶级时
      if (!newCh.parentId && ((!this.isAdd && beanValue.parentId != this.clickOrBean.parentId) ||
      (this.isAdd && beanValue.parentId != this.clickOrBean.id))) {
        if (!this.isAdd) { // 编辑
          const parent = this.node.parent
          const children = parent.data.children || parent.data
          const index = children.findIndex(d => d.id === this.clickOrBean.id)
          children.splice(index, 1)
          this.dataTable = []
        }
        if (!newCh.detail && !newCh.children) {
          obj = { name: '' }
          delete newCh.children
          this.$set(newCh, 'children', [obj])
        }
        this.orgData.push(newCh)
        return
      }

      if ((!this.isAdd && beanValue.parentId != this.clickOrBean.parentId) ||
      (this.isAdd && beanValue.parentId != this.clickOrBean.id)) { //  编辑都判断父级 新增只是id与父级
        if (!this.isAdd) {
          const parent = this.node.parent
          const children = parent.data.children || parent.data
          const index = children.findIndex(d => d.id === this.clickOrBean.id)
          children.splice(index, 1)
          this.dataTable = []
        }
        this.parentBeanForAppend = undefined
        this.parentBeanForAppend = this.$refs.tree.getNode(beanValue.parentId).data
        if (this.parentBeanForAppend) {
          obj = { name: '' }
          if (!this.parentBeanForAppend.children) {
            this.$set(this.parentBeanForAppend, 'children', [obj])
          }
          if (!newCh.detail && !newCh.children) {
            delete newCh.children
            this.$set(newCh, 'children', [obj])
          }
          this.parentBeanForAppend.children.push(newCh)
        }
        return
      }

      if (this.isAdd) { // 新增
        const newChild = { ...beanValue }
        if (!this.clickOrBean.children) {
          delete this.clickOrBean.children
          this.$set(this.clickOrBean, 'children', [])
        }
        this.clickOrBean.children.push(newChild)
      } else {
        this.$set(this.clickOrBean, 'name', beanValue.name)
        this.$set(this.clickOrBean, 'detail', beanValue.detail)
        this.$set(this.clickOrBean, 'open', beanValue.open)
        this.$set(this.clickOrBean, 'payModel', beanValue.payModel)
      }
    },

//这个是关键 ---- 移动
handleMoveToGroup() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.moveloading = true
          const reqPara = {
            data: {
              id: this.clickOrgId,
              targetId: this.form.moveToId
            }
          }
          this.urlmethod(this.url.channelgroup.move_clas, reqPara).then((res) => {
            var parentChildren
            var linshiBean
            if (this.clickOrBean.parentId) {
              parentChildren = this.$refs.tree.getNode(this.clickOrBean.parentId).data.children
              for (var a = 0; a < parentChildren.length; a++) {
                if (this.form.moveToId == parentChildren[a].id) {
                  linshiBean = parentChildren[this.moveBeandIndex]
                  if (a < this.moveBeandIndex) { // 在前 先删 后加
                    parentChildren.splice(this.moveBeandIndex, 1)
                    parentChildren.splice(a > 0 ? a : 0, 0, linshiBean)
                    break
                  } else { // 在后 先加 后删
                    if (a < parentChildren.length - 1) {
                      parentChildren.splice(a + 1, 0, linshiBean)
                    } else {
                      parentChildren.push(linshiBean)
                    }
                    parentChildren.splice(this.moveBeandIndex, 1)
                  }
                }
              }
              delete this.node.parent.data.children
              this.$set(this.node.parent.data, 'children', JSON.parse(JSON.stringify(parentChildren)))
            } else {
              for (var aa = 0; aa < this.orgData.length; aa++) {
                if (this.form.moveToId == this.orgData[aa].id) {
                  linshiBean = this.orgData[this.moveBeandIndex + 2]
                  if (aa < this.moveBeandIndex + 2) { // 在前 先删 后加
                    this.orgData.splice(this.moveBeandIndex + 1 + 1, 1)
                    this.orgData.splice(aa > 1 ? aa : 1, 0, linshiBean)
                    break
                  } else { // 在后 先加 后删
                    if (aa < this.orgData.length - 1) {
                      this.orgData.splice(aa + 1, 0, linshiBean)
                    } else {
                      this.orgData.push(linshiBean)
                    }
                    this.orgData.splice(this.moveBeandIndex + 1 + 1, 1)
                  }
                }
              }
              this.orgData = [...JSON.parse(JSON.stringify(this.orgData))]
            }
            this.show_moveDialog = false
            this.moveloading = false
            this.$message({
              message: this.$t('common.moveSuccess'),
              type: 'success'
            })
          }).catch(() => {
            this.moveloading = false
          })
        } else {
          return false
        }
      })
    },

 orgClickHandle(data, Node, NodeItemSelf) {
      this.dataTable = []
      this.pagination.total = 0
      this.pagination.currentPage = 1
      this.node = Node
      this.$refs.tree.setCheckedKeys([])
      this.$refs.tree.setCheckedKeys([data.id])
      this.clickOrgName = data.name
      this.clickOrgId = data.id
      this.clickOrBean = data
      this.parentBean = Node.parent.data
      if (data.children && data.children[0].name == '') {
        if (!this.clickOrgId) {
          this.initOrgTreeData()
        } else if (this.clickOrBean && this.clickOrBean.id > 0 && !this.clickOrBean.detail) {
          this.initOrgTreeData_click()
        }
      }
    },
    showItem(data, Node, NodeItemSelf) {
      this.dataTable = []
      this.pagination.total = 0
      this.pagination.currentPage = 1
      this.node = Node
      this.$refs.tree.setCheckedKeys([])
      this.$refs.tree.setCheckedKeys([data.id])
      this.clickOrgName = data.name
      this.clickOrgId = data.id
      this.clickOrBean = data
      this.parentBean = Node.parent.data
      if (!this.clickOrBean.id || this.clickOrBean.detail) {
        this.list_byOrgId()
      }
    },