feat: add tree line

2025-11-09 13:53:38 +08:00 · 2022-03-07 20:21:15 +08:00
parent 8e7a79cf94
commit 74a6b3ffdc
10 changed files with 408 additions and 146 deletions
--- a/src/components/ReTreeLine/index.scss
+++ b/src/components/ReTreeLine/index.scss
@@ -0,0 +1,49 @@
+$--element-tree-line-color: #dcdfe6 !default;
+$--element-tree-line-style: dashed !default;
+$--element-tree-line-width: 1px !default;
+
+/* 添加 el-tree-node__conten 默认没有的 position */
+.el-tree .el-tree-node__content {
+  position: relative;
+}
+
+.element-tree-node-label-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.element-tree-node-label {
+  font-size: 12px;
+}
+.element-tree-node-line-ver {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-left: $--element-tree-line-width $--element-tree-line-style
+    $--element-tree-line-color;
+  &.last-node-line {
+    border-left: $--element-tree-line-width $--element-tree-line-style
+      transparent;
+  }
+  &.last-node-isLeaf-line {
+    height: 50%;
+  }
+}
+.element-tree-node-line-hor {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 0;
+  border-bottom: $--element-tree-line-width $--element-tree-line-style
+    $--element-tree-line-color;
+}
+.element-tree-node-label-line {
+  flex: 1;
+  border-top: $--element-tree-line-width $--element-tree-line-style
+    $--element-tree-line-color;
+  align-self: center;
+  margin: 0 10px;
+}
--- a/src/components/ReTreeLine/index.ts
+++ b/src/components/ReTreeLine/index.ts
@@ -0,0 +1,155 @@
+// 参考https://www.npmjs.com/package/element-tree-line (主要是替换需要通过函数传参的方式去注册组件，并添加更好的类型支持，并移除this.$scopedSlots，在3.x中,将所有this.$scopedSlots替换为this.$slots)
+import { isFunction } from "/@/utils/is";
+import { h, defineComponent } from "vue";
+import type { PropType } from "vue";
+import "./index.scss";
+import type {
+  TreeNode,
+  TreeData,
+  TreeNodeData
+} from "element-plus/es/components/tree-v2/src/types";
+
+export default defineComponent({
+  name: "el-tree-line",
+  props: {
+    node: {
+      type: Object as PropType<TreeNode>,
+      required: true
+    },
+    data: {
+      type: Array as PropType<TreeNodeData>,
+      default: () => {}
+    },
+    treeData: {
+      type: Array as PropType<TreeData>,
+      default: () => []
+    },
+    indent: {
+      type: Number,
+      default: 16
+    },
+    showLabelLine: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(_, context) {
+    const { slots } = context;
+    const getScopedSlot = slotName => {
+      if (!slotName) {
+        return null;
+      }
+      const slotNameSplits = slotName.split("||");
+      let slot = null;
+      for (let index = 0; index < slotNameSplits.length; index++) {
+        const name = slotNameSplits[index];
+        slot = (slots || {})[name];
+      }
+      return slot;
+    };
+    const getSlotValue = (slot, scopedData, defaultNode = null) => {
+      if (isFunction(slot)) {
+        return slot(scopedData) || defaultNode;
+      }
+      return slot || defaultNode;
+    };
+
+    return {
+      getScopedSlot,
+      getSlotValue
+    };
+  },
+  render() {
+    // 自定义整行节点label区域
+    const scopeSlotDefault = this.getScopedSlot("default");
+    // 显示横线时自定义节点label区域
+    const labelSlot = this.getScopedSlot("node-label");
+    // 显示横线时追加在横线右边的内容
+    const afterLabelSlot = this.getScopedSlot("after-node-label");
+    const labelNodes = scopeSlotDefault
+      ? this.getSlotValue(scopeSlotDefault, {
+          node: this.node,
+          data: this.data
+        })
+      : [
+          labelSlot
+            ? this.getSlotValue(labelSlot, {
+                node: this.node,
+                data: this.data
+              })
+            : h("span", { class: "element-tree-node-label" }, this.node.label),
+          this.showLabelLine
+            ? h("span", {
+                class: "element-tree-node-label-line"
+              })
+            : null,
+          this.getSlotValue(afterLabelSlot, {
+            node: this.node,
+            data: this.data
+          })
+        ];
+    // 取得每一层的当前节点是不是在当前层级列表的最后一个
+    const lastnodeArr = [];
+    let currentNode = this.node;
+    while (currentNode) {
+      let parentNode = currentNode.parent;
+      // 兼容element-plus的 el-tree-v2 (Virtualized Tree 虚拟树)
+      if (currentNode.level === 1 && !currentNode.parent) {
+        // el-tree-v2的第一层node是没有parent的，必需 treeData 创建一个parent
+        if (!this.treeData || !Array.isArray(this.treeData)) {
+          throw Error(
+            "if you using el-tree-v2 (Virtualized Tree) of element-plus,element-tree-line required data."
+          );
+        }
+        parentNode = {
+          children: Array.isArray(this.treeData)
+            ? this.treeData.map(item => {
+                return { ...item, key: item.id };
+              })
+            : [],
+          level: 0,
+          key: "node-0",
+          parent: null
+        };
+      }
+      if (parentNode) {
+        // element-plus的 el-tree-v2 使用的是children和key， 其他使用的是 childNodes和id
+        const index = (parentNode.children || parentNode.childNodes).findIndex(
+          item => (item.key || item.id) === (currentNode.key || currentNode.id)
+        );
+        lastnodeArr.unshift(
+          index === (parentNode.children || parentNode.childNodes).length - 1
+        );
+      }
+      currentNode = parentNode;
+    }
+    const lineNodes = [];
+    for (let i = 0; i < this.node.level; i++) {
+      lineNodes.push(
+        h("span", {
+          class: {
+            "element-tree-node-line-ver": true,
+            "last-node-line": lastnodeArr[i] && this.node.level - 1 !== i,
+            "last-node-isLeaf-line": lastnodeArr[i] && this.node.level - 1 === i
+          },
+          style: { left: this.indent * i + "px" }
+        })
+      );
+    }
+    return h(
+      "span",
+      {
+        class: "element-tree-node-label-wrapper"
+      },
+      [labelNodes].concat(lineNodes).concat([
+        h("span", {
+          class: "element-tree-node-line-hor",
+          style: {
+            width: (this.node.isLeaf ? 24 : 8) + "px",
+            left: (this.node.level - 1) * this.indent + "px"
+          }
+        })
+      ])
+    );
+  }
+});
--- a/src/plugins/element-plus/index.ts
+++ b/src/plugins/element-plus/index.ts
@@ -43,7 +43,6 @@ import {
  ElEmpty,
  ElCollapse,
  ElCollapseItem,
-  ElTreeV2,
  ElTable,
  ElTableColumn,
  ElLink,
@@ -55,6 +54,8 @@ import {
  ElResult,
  ElSteps,
  ElStep,
+  ElTree,
+  ElTreeV2,
  // 指令
  ElLoading,
  ElInfiniteScroll
@@ -107,6 +108,7 @@ const components = [
  ElEmpty,
  ElCollapse,
  ElCollapseItem,
+  ElTree,
  ElTreeV2,
  ElTable,
  ElTableColumn,
--- a/src/plugins/i18n/en/menus.ts
+++ b/src/plugins/i18n/en/menus.ts
@@ -47,5 +47,6 @@ export default {
  hsSuccess: "Success Page",
  hsFail: "Fail Page",
  hsIconSelect: "Icon Select",
-  hsTimeline: "Time Line"
+  hsTimeline: "Time Line",
+  hsLineTree: "LineTree"
 };
--- a/src/plugins/i18n/zh-CN/menus.ts
+++ b/src/plugins/i18n/zh-CN/menus.ts
@@ -47,5 +47,6 @@ export default {
  hsSuccess: "成功页面",
  hsFail: "失败页面",
  hsIconSelect: "图标选择器",
-  hsTimeline: "时间线"
+  hsTimeline: "时间线",
+  hsLineTree: "树形连接线"
 };
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -13,15 +13,6 @@ const ableRouter = {
    rank: 3
  },
  children: [
-    {
-      path: "/able/menuTree",
-      name: "reMenuTree",
-      component: () => import("/@/views/able/menu-tree.vue"),
-      meta: {
-        title: $t("menus.hsMenuTree"),
-        i18n: true
-      }
-    },
    {
      path: "/able/watermark",
      name: "reWatermark",
@@ -57,6 +48,24 @@ const ableRouter = {
        title: $t("menus.hsTimeline"),
        i18n: true
      }
+    },
+    {
+      path: "/able/menuTree",
+      name: "reMenuTree",
+      component: () => import("/@/views/able/menu-tree.vue"),
+      meta: {
+        title: $t("menus.hsMenuTree"),
+        i18n: true
+      }
+    },
+    {
+      path: "/able/lineTree",
+      name: "reLineTree",
+      component: () => import("/@/views/able/line-tree.vue"),
+      meta: {
+        title: $t("menus.hsLineTree"),
+        i18n: true
+      }
    }
  ]
 };
--- a/src/views/able/line-tree.vue
+++ b/src/views/able/line-tree.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import ElTreeLine from "/@/components/ReTreeLine";
+import { extractPathList, deleteChildren } from "/@/utils/tree";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
+let menusData = computed(() => {
+  return deleteChildren(usePermissionStoreHook().menusTree);
+});
+let expandedKeys = extractPathList(menusData.value);
+let dataProps = {
+  value: "uniqueId",
+  children: "children"
+};
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          扩展elemenet-plus的树形组件包括虚拟树组件，支持连接线
+        </span>
+      </div>
+    </template>
+
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-20px">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span class="font-medium"> 普通树结构 </span>
+            </div>
+          </template>
+          <div class="max-h-550px overflow-y-auto">
+            <el-tree
+              :data="menusData"
+              :props="dataProps"
+              show-checkbox
+              default-expand-all
+              node-key="uniqueId"
+              :indent="30"
+              ><template v-slot:default="{ node }">
+                <el-tree-line :node="node" :showLabelLine="true">
+                  <template v-slot:node-label>
+                    <span class="text-sm">{{ $t(node.data.meta.title) }}</span>
+                  </template>
+                </el-tree-line>
+              </template>
+            </el-tree>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span class="font-medium"> 虚拟树结构 </span>
+            </div>
+          </template>
+          <div class="max-h-550px overflow-y-auto">
+            <el-tree-v2
+              :data="menusData"
+              :props="dataProps"
+              show-checkbox
+              :height="550"
+              :default-expanded-keys="expandedKeys"
+            >
+              <template v-slot:default="{ node }">
+                <el-tree-line
+                  :node="node"
+                  :treeData="menusData"
+                  :showLabelLine="true"
+                  :indent="30"
+                >
+                  <template v-slot:node-label>
+                    <span class="text-sm">{{ $t(node.data.meta.title) }}</span>
+                  </template>
+                </el-tree-line>
+              </template>
+            </el-tree-v2>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
--- a/src/views/able/timeline.vue
+++ b/src/views/able/timeline.vue
@@ -26,6 +26,7 @@ const activities = [
  {
    content: "支持自定义图标",
    timestamp: lastBuildTime,
+    color: "transparent",
    icon: useRenderIcon("iphone", {
      color: "#0bbd87"
    })