feat: ✨add expand

xpyjs · Apr 21, 2023 · 7ad8c81 · 7ad8c81
1 parent 7189ff7
commit 7ad8c81
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 6 deletions.
diff --git a/src/components/column/index.vue b/src/components/column/index.vue
@@ -10,6 +10,34 @@
       class="cell"
       :style="{ lineHeight: `${rowHeight}px`, height: `${rowHeight}px` }"
     >
+      <div
+        v-if="props.__index === 0"
+        :class="['expand-icon', { 'expand-icon__expanded': data?.isExpand }]"
+        @click="
+          () => {
+            data?.setExpand(!data.isExpand);
+            $data.updateFlatData();
+          }
+        "
+      >
+        <svg
+          t="1682094638676"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="1386"
+          :width="`${rowHeight / 2}px`"
+          :height="`${rowHeight / 2}px`"
+        >
+          <path
+            d="M384 210.773333l278.613333 278.613334a32 32 0 0 1 0 45.226666L384 813.226667 338.773333 768l256-256-256-256L384 210.773333z"
+            p-id="1387"
+            fill="#9f9f9f"
+          ></path>
+        </svg>
+      </div>
+
       <slot v-if="slots.default" v-bind="props.data?.data" />
 
       <template v-else-if="props.prop">{{
@@ -25,6 +53,7 @@ import columnProps from './props';
 import { defineComponent, useSlots, computed } from 'vue';
 import useStyle from '@/composables/useStyle';
 import useSlotsBox from '@/composables/useSlotsBox';
+import useData from '@/composables/useData';
 
 export default defineComponent({
   name: Variables.name.column
@@ -34,11 +63,11 @@ export default defineComponent({
 <script lang="ts" setup>
 const props = defineProps(columnProps);
 const slots = useSlots();
-
 const { $styleBox, rowHeight } = useStyle();
-
 const { $slotsBox, isMerge } = useSlotsBox();
 
+const { $data } = useData();
+
 const realWidth = computed(() => {
   let curWidth = $slotsBox.tableHeaders.leafs[props!.__index ?? 1].width;
 
@@ -74,6 +103,20 @@ const realWidth = computed(() => {
     vertical-align: middle;
     text-overflow: ellipsis;
     padding: 0 6px;
+
+    .expand-icon {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 4px;
+      cursor: pointer;
+      transition: transform 0.2s ease-in-out;
+      position: relative;
+      transform-origin: center 45%;
+    }
+
+    .expand-icon__expanded {
+      transform: rotate(90deg);
+    }
   }
 }
 </style>
diff --git a/src/composables/useInView.ts b/src/composables/useInView.ts
@@ -29,10 +29,11 @@ export default () => {
   // 切出要展示的数据
   const inView = reactive<RowItem[]>([]);
   watch(
-    () => [top.value, bottom.value],
+    () => [top.value, bottom.value, store.$data.flatData],
     () => {
       for (let i = inView.length - 1; i >= 0; i--) {
         if (
+          inView[i].hide ||
           inView[i].flatIndex < top.value ||
           inView[i].flatIndex > bottom.value
         ) {

diff --git a/src/models/data/all.ts b/src/models/data/all.ts
@@ -124,6 +124,13 @@ export default class AllData {
     return row;
   }
 
+  /**
+   * 更新平铺数据
+   */
+  updateFlatData() {
+    this.__flatten();
+  }
+
   /**
    * 更新数据
    * @param data 新数据（原始）

diff --git a/src/models/data/row.ts b/src/models/data/row.ts
@@ -2,7 +2,7 @@
  * @Author: JeremyJone
  * @Date: 2021-09-09 15:50:52
  * @LastEditors: JeremyJone
- * @LastEditTime: 2023-04-18 19:30:08
+ * @LastEditTime: 2023-04-22 01:17:28
  * @Description: 一条数据类
  */
 
@@ -51,13 +51,13 @@ export default class RowItem {
    * 数据属性
    */
   options: Required<DataOptions> = {
-    isExpand: true,
+    isExpand: false,
     startLabel: Variables.default.startKey,
     endLabel: Variables.default.endKey
   };
 
   private __data: any;
-  private __isExpand: boolean = true;
+  private __isExpand: boolean = false;
   private __isChecked: boolean = false;
 
   /**
@@ -81,6 +81,13 @@ export default class RowItem {
     return this.__isChecked;
   }
 
+  /**
+   * 获取当前数据是否应该隐藏
+   */
+  get hide() {
+    return !this.isExpand && this.level > 0;
+  }
+
   /**
    * 起始时间
    */