feat: ✨add indent

xpyjs · Apr 21, 2023 · 33928f6 · 33928f6
1 parent a2a4924
commit 33928f6
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/components/column/index.vue b/src/components/column/index.vue
@@ -10,6 +10,8 @@
       class="cell"
       :style="{ lineHeight: `${rowHeight}px`, height: `${rowHeight}px` }"
     >
+      <div class="level-block" :style="{ width: `${data!.level * 20}px` }" />
+
       <div
         v-if="props.__index === 0 && !!data?.children?.length"
         :class="['expand-icon', { 'expand-icon__expanded': data?.isExpand }]"
@@ -38,6 +40,12 @@
         </svg>
       </div>
 
+      <div
+        v-else
+        class="expand-icon"
+        :style="{ width: `${rowHeight / 2}px` }"
+      />
+
       <slot v-if="slots.default" v-bind="props.data?.data" />
 
       <template v-else-if="props.prop">{{
@@ -117,6 +125,10 @@ const realWidth = computed(() => {
     .expand-icon__expanded {
       transform: rotate(90deg);
     }
+
+    .level-block {
+      display: inline-block;
+    }
   }
 }
 </style>