✨(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"
+                v-if="(slot.expand || data.children) && index === 0"
-              class="layui-table-cell-expand-icon"
+                class="layui-table-cell-expand-icon"
-              :type="expandIconType"
+                :type="expandIconType"
-              @click="handleExpand"
+                @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"

package/document/src/document/zh-CN/components/table.md

@@ -376,7 +376,7 @@ export default {
 ::: title 树形表格
 :::
 
-::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格
+::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度
 
 <template>
   <lay-table :columns="columns7" :dataSource="dataSource7">
@@ -402,12 +402,8 @@ export default {
     ]
 
     const dataSource7 = [
-      {name:"张三", score:100, children: [{name:"张三", score:100},{name:"张三", score:100}]},
+      {name:"系统管理", score:100, children: [{name:"用户管理", score:100, children: [{name:"用户修改", score:100},{name:"用户删除", score:100}]},{name:"角色管理", score:100}]},
-      {name:"李四", score:80, children: [{name:"张三", score:100},{name:"张三", score:100}]},
+      {name:"电商管理", score:100, children: [{name:"商品管理", score:100},{name:"分类管理", score:100}]},
-      {name:"王二", score:99, children: [{name:"张三", score:100},{name:"张三", score:100}]},
-      {name:"麻子", score:92, children: [{name:"张三", score:100},{name:"张三", score:100}]},
-      {name:"无名", score:60, children: [{name:"张三", score:100},{name:"张三", score:100}]},
-      {name:"有名", score:70, children: [{name:"张三", score:100},{name:"张三", score:100}]},
     ]
 
     return {
@@ -467,17 +463,17 @@ export default {
 
 ::: table
 
-| 插槽       | 描述       | 类型     | 默认值 | 可选值                  |
+| 插槽            | 描述                           | 类型      | 默认值  | 可选值                  |
-| ---------- | ---------- | -------- | ------ | ----------------------- |
+| --------------- | ------------------------------ | --------- | ------- | ----------------------- |
-| title      | 列标题     | --       | --     | --                      |
+| title           | 列标题                         | --        | --      | --                      |
-| key        | 数据字段   | --       | --     | --                      |
+| key             | 数据字段                       | --        | --      | --                      |
-| customSlot | 自定义插槽 | --       | --     | --                      |
+| customSlot      | 自定义插槽                     | --        | --      | --                      |
-| width      | 宽度       | --       | --     | --                      |
+| width           | 宽度                           | --        | --      | --                      |
-| minWidth      | 最小宽度       | --       | --     | --                      |
+| minWidth        | 最小宽度                       | --        | --      | --                      |
-| sort       | 排序       | --       | --     | --                      |
+| sort            | 排序                           | --        | --      | --                      |
-| titleSlot  | 标题插槽   | --       | --     | --                      |
+| titleSlot       | 标题插槽                       | --        | --      | --                      |
-| align      | 对齐方式   | `string` | `left` | `left` `right` `center` |
+| align           | 对齐方式                       | `string`  | `left`  | `left` `right` `center` |
-| ellipsisTooltip  | 当内容过长被隐藏时显示 tooltip   | `boolean` | `false` | `true` `false` |
+| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false`          |
 
 :::
 

package/document/src/document/zh-CN/guide/changelog.md

@@ -11,6 +11,16 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.1.x">
+    <ul> 
+      <a name="1-1-4"></a> 
+      <li> 
+        <h3>1.1.4 <span class="layui-badge-rim">2022-05-29</span></h3> 
+        <ul>
+          <li>[新增] table 组件 expand 插槽, 内容较多不能一次性完全展示时使用, 参数 data 为当前行数据</li>
+          <li>[新增] table 组件 children 字段解析, 当字段中存在 children 时会自动转化为树表, 通过设置 indentSize 以控制每一层的缩进宽度</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="1-1-3"></a> 
       <li>