ドロップダウン選択を操作する会社をVUE ---ツリーノードアーキテクチャと披露

プレスツリーノードの動作が示され、ライブラリ内の<EL-入力> UI要素を選択するためにドロップダウンボックスを使用し、<EL-ツリー>、<EL-ドロップダウン>

具体的な使用を参照してください：https://element.eleme.cn/#/zh-CN/component/tree、https://element.eleme.cn/#/zh-CN/component/dropdown

結果は：

         

特長：フィルタリング検索し、会社のツリーノードとして表示されます-ノードが縮むことが拡大し、政府部門の構造-子会社、各ノード上で動作し、ドロップダウンポップで書き込み、特定の操作。

PS：小扁は、スタイルを調整するためにCSSスタイルを学ばなかった実際にいくつかの時間がかかった、流線型スタイルのコード、歓迎の批判を調整する必要があります。

完全なコード：（iconfontアイコンの下から）

<template>
  <div class="employee">
    <el-input placeholder="搜索部门" v-model="filterText"></el-input>
    <el-tree
      :data="departmentTree"
      node-key="departmentId"
      :props="departmentTreeProps"
      default-expand-all
      ref="departmentTree"
      :filter-node-method="filterDepartNode"
    >
        <div class="tree-node-group" slot-scope="{ node, data }">
            <span class="tree-node-title">
              <i :class="data.icon"></i>
              <span class="node-label">{{ node.label}}</span>
            </span>
            <el-dropdown>
              <span class="el-dropdown-link">
                   <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="addFormVisible = true">添加子部门</el-dropdown-item>
                <el-dropdown-item @click.native="editdepartmentName(item.departmentName)">修改部门名</el-dropdown-item>
                <el-dropdown-item @click.native="deleteFormVisible = true">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
      </div>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      departmentTreeProps: {
        children: "childList",
        label: "departmentName"
      },
      filterText: "",
      departmentTree: [
        {
          departmentId: 0,
          departmentName: "xxxxxxxxxxxxxxxx公司",
          icon: "iconfont icon-gongsimingcheng",
          childList: [
            {
              departmentId: 1,
              departmentName: "a子公司",
              icon: "iconfont icon-bumenyongneng",
              childList: [
                {
                  departmentId: 6,
                  departmentName: "人力资源部"
                },
                {
                  departmentId: 7,
                  departmentName: "后勤部"
                }
              ]
            },
            {
              departmentId: 2,
              icon: "iconfont icon-bumenyongneng",
              departmentName: "b子公司",
              childList: [
                {
                  departmentId: 6,
                  departmentName: "综合部"
                },
                {
                  departmentId: 8,
                  departmentName: "财务部"
                }
              ]
            },
            {
              departmentId: 3,
              departmentName: "c子公司",
              icon: "iconfont icon-bumenyongneng",
              childList: [
                {
                  departmentId: 7,
                  departmentName: "后勤部"
                },
                {
                  departmentId: 8,
                  departmentName: "财务部"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  watch: {
    filterText(val) {
      this.$refs.departmentTree.filter(val);
      this.$refs.tableData.filter(val);
    }
  },
  methods: {
    // 查询节点
    filterDepartNode(value, departmentTree) {
      if (!value) return true;
      return departmentTree.departmentName.indexOf(value) !== -1;
    }
  }
};
</script>
<style lang="less">
// 树
.employee {
  width: 250px;
  .el-input {
    margin-bottom: 10px;
    .el-input__inner {
      height: 34px;
      // 设置input框圆角
      border-radius: 17px;
    }
  }
  .el-tree {
    .el-tree-node {
      width: 100%;
      padding: 4px 0;
      // 设置下三角图标不可见
      .el-tree-node__expand-icon {
        display: none;
      }
      //一级+其他子父节点
      .el-tree-node__content {
        background: #ccc;
        height: 35px;
        .tree-node-group {
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          align-items: center;
          .tree-node-title {
            background: #ebf3ff;
            height: 100%;
            width: 100%;
            color: #3377ff;
            margin: 0 auto;
            display: flex;
            align-items: center;
            font-size: 14px;
            // 一级节点图标
            .icon-gongsimingcheng {
              background: #fff;
              color: #409eff;
              font-size: 26px;
              padding: 8px 0px;
              padding-right: 5px;
              margin-right: 10px;
            }
          }

          // 右侧下拉
          .el-dropdown {
            // 设置图标靠右对齐
            position: absolute;
            right: 0px;
            .el-dropdown-link {
              .el-icon-more {
                transform: rotate(90deg);
                color: #aaa;
              }
            }
          }
        }
      }

      // 其他子节点
      .el-tree-node__children {
        .el-tree-node__content {
          height: 28px;
          background: #fff;
          .tree-node-title {
            background-color: #fff;
            color: #18263c;
          }
          .el-dropdown-link {
            background: #fff;
          }
        }
        // 二级节点图标
        .icon-bumenyongneng {
          margin: 0 5px;
        }
        // 三级节点图标
        .icon-yuangongzhanghaoguanli {
          margin-right: 5px;
          margin-left: -4px;
        }
      }
    }
  }
}
</style>