element组织树总结

页面效果

主要代码

        <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            class="trees"
            default-expand-all
            @node-click="handleNodeClick"
          >
            <div class="custom-tree-node treeNode" slot-scope="{ node, data }">
              <span class="label" :title="node.label">{{ node.label }}</span>
              <span class="icon">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more" style="transform: rotate(-90deg);"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="beforeHandleCommand(node, data, 'edit')"
                      >编辑</el-dropdown-item
                    >
                    <el-dropdown-item :command="beforeHandleCommand(node, data, 'child')"
                      >创建子部门</el-dropdown-item
                    >
                    <el-dropdown-item :command="beforeHandleCommand(node, data, 'up')"
                      >上移</el-dropdown-item
                    >
                    <el-dropdown-item :command="beforeHandleCommand(node, data, 'down')"
                      >下移</el-dropdown-item
                    >
                    <el-dropdown-item :command="beforeHandleCommand(node, data, 'del')"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </div>
          </el-tree>

 .trees {
        .el-tree-node__content {
          width: 100%;
        }
        .treeNode {
          width: 100%;
          box-sizing: border-box;
          margin-left: -24px;
          padding-left: 24px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .label {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .icon {
            float: right;
          }
        }
      }

  // 下拉组件点击事件
    beforeHandleCommand (node, data, command) {
      return { node, data, command }
    },
    handleCommand (obj) {
      // console.log(obj)
      if (obj.command === 'del') {
        this.deleteDept(obj.data)
      } else if (obj.command === 'edit') {
        this.editDept(obj.data)
      } else if (obj.command === 'child') {
        this.addChildrenDept(obj.data)
      } else if (obj.command === 'up') {
        if (!obj.node.previousSibling) {
          // this.$alert.error('已经在最顶部啦！')
          this.$alert('已经在最顶部啦！', '温馨提示', {
            confirmButtonText: '确定'
          })
        } else {
          let sort = obj.data.sort
          obj.data.sort = obj.node.previousSibling.data.sort
          obj.node.previousSibling.data.sort = sort
          let p1 = Promise.resolve(this.removeDept(obj.data))
          let p2 = Promise.resolve(this.removeDept(obj.node.previousSibling.data))
          Promise.all([p1, p2]).then(() => {
            setTimeout(() => {
              this.getTrees()
              this.$message.success('上移成功')
            }, 1000)
          })
        }
      } else if (obj.command === 'down') {
        if (!obj.node.nextSibling) {
          // this.$message.error('已经在最底部啦！')
          this.$alert('已经在最底部啦！', '温馨提示', {
            confirmButtonText: '确定'
          })
        } else {
          let sort = obj.data.sort
          obj.data.sort = obj.node.nextSibling.data.sort
          obj.node.nextSibling.data.sort = sort
          let p1 = Promise.resolve(this.removeDept(obj.data))
          let p2 = Promise.resolve(this.removeDept(obj.node.nextSibling.data))
          Promise.all([p1, p2]).then(() => {
            setTimeout(() => {
              this.getTrees()
              this.$message.success('下移成功')
            }, 1000)
          })
        }
      }
    },

遇到问题：

1.为了下拉菜单图标和部门名称左右布局用到了弹性布局。当部门名称太长时，后面的下拉菜单图标会被挤到看不见

分析发现时前面小三角图标的影响，因为宽度100%跟父盒子一样宽，但其实这里是有一个三角图标占24px的，所以下拉菜单图标就被挤到后面了24px看不到了，添加margin-left: -24px; padding-left: 24px;就可以解决图标问题

2.下拉菜单多个的时候传参问题（el-down的Command事件只能接受一个参数）

下拉菜单多个的时候可以用el-dropdown-item里command传一个参数去判断具体哪个触发的el-down的Command事件，但是如果需要传多个数据就需要传递对象,传递对象的方式是el-dropdown-item上面先用:command="beforeHandleCommand(node, data, 'down')传递参数，

beforeHandleCommand (node, data, command) {

      return { node, data, command }

    },然后返回成对象格式，再触发el-down的Command事件

3.因为上移和下移我的后端要求调两次接口，而我需要两次都成功之后刷新组织树并提示移动成功，所以使用promise.all去实现

let p1 = Promise.resolve(this.removeDept(obj.data))
          let p2 = Promise.resolve(this.removeDept(obj.node.nextSibling.data))
          Promise.all([p1, p2]).then(() => {
            setTimeout(() => {
              this.getTrees()
              this.$message.success('下移成功')
            }, 1000)
          })