✨(table): 新增 indent-size 设置 tree-table 行级缩进

package/component/src/component/table/TableRow.vue

@@ -9,6 +9,8 @@ import { computed, ref, useSlots, WritableComputedRef } from "vue";
 import { Recordable } from "../../types";
 
 export interface LayTableRowProps {
+  indentSize: number;
+  currentIndentSize: number;
   expandSpace: boolean;
   selectedKeys: Recordable[];
   tableColumnKeys: Recordable[];
@@ -67,6 +69,8 @@ const expandIconType = computed(() => {
 const handleExpand = () => {
   isExpand.value = !isExpand.value;
 };
+
+const childrenIndentSize = props.currentIndentSize + props.indentSize;
 </script>
 
 <template>
@@ -101,11 +105,18 @@ const handleExpand = () => {
               whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
             }"
           >
+
+
+            <!-- 树表占位与缩进 -->
+            <span v-if="expandSpace && index === 0" :style="{'margin-right': currentIndentSize + 'px'}"></span> 
+
+            <span v-if="expandSpace && (!data.children && !slot.expand) && index === 0" class="layui-table-cell-expand-icon-spaced"></span>
+
             <lay-icon
-              v-if="(slot.expand || data.children) && index === 0"
-              class="layui-table-cell-expand-icon"
-              :type="expandIconType"
-              @click="handleExpand"
+                v-if="(slot.expand || data.children) && index === 0"
+                class="layui-table-cell-expand-icon"
+                :type="expandIconType"
+                @click="handleExpand"
             ></lay-icon>
 
             <lay-tooltip
@@ -131,6 +142,12 @@ const handleExpand = () => {
                 whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
               }"
             >
+
+              <!-- 树表占位与缩进 -->
+              <span v-if="expandSpace && index === 0" :style="{'margin-right': currentIndentSize + 'px'}"></span> 
+
+              <span v-if="expandSpace && (!data.children && !slot.expand) && index === 0" class="layui-table-cell-expand-icon-spaced"></span>
+
               <lay-icon
                 v-if="(slot.expand || data.children) && index === 0"
                 class="layui-table-cell-expand-icon"
@@ -165,6 +182,8 @@ const handleExpand = () => {
         :id="id"
         :data="children"
         :columns="columns"
+        :indent-size="indentSize"
+        :current-indent-size="childrenIndentSize"
         :checkbox="checkbox"
         :tableColumnKeys="tableColumnKeys"
         :expandSpace="expandSpace"

package/component/src/component/table/index.less

@@ -363,7 +363,9 @@
 }
 
 .layui-table-cell-expand-icon-spaced {
+  width: 26px;
   visibility: hidden;
+  display: inline-block;
 }
 
 .layui-table-body {

package/component/src/component/table/index.vue

@@ -26,11 +26,13 @@ export interface LayTableProps {
   dataSource: Recordable[];
   defaultToolbar?: boolean;
   selectedKeys?: Recordable[];
+  indentSize?: number;
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
   id: "id",
   size: "md",
+  indentSize: 30,
   dataSource: () => [],
   selectedKeys: () => [],
 });
@@ -208,14 +210,14 @@ props.columns.map((value: any) => {
   }
 });
 
-// is tree
 const childrenExpandSpace = ref(false);
+const currentIndentSize = ref(0);
 
 props.dataSource.map((value: any) => {
-  if(value.children) {
+  if (value.children) {
     childrenExpandSpace.value = true;
-  } 
-})
+  }
+});
 </script>
 
 <template>
@@ -332,6 +334,8 @@ props.dataSource.map((value: any) => {
                   :data="data"
                   :columns="columns"
                   :checkbox="checkbox"
+                  :indent-size="indentSize"
+                  :currentIndentSize="currentIndentSize"
                   :tableColumnKeys="tableColumnKeys"
                   :expandSpace="childrenExpandSpace"
                   @row="rowClick"