✨(table): 新增 childrenColumnName 属性

package/component/src/component/badge/index.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, StyleValue } from "vue";
 import "./index.less";
 
 export interface LayBadgeProps {
@@ -29,7 +29,7 @@ const classes = computed(() => {
   ];
 });
 
-const styles = computed(() => {
+const styles = computed<StyleValue>(() => {
   props.color ? `background-color: ${props.color}` : "";
 });
 </script>

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

@@ -14,6 +14,7 @@ export interface LayTableRowProps {
   expandSpace: boolean;
   selectedKeys: Recordable[];
   tableColumnKeys: Recordable[];
+  childrenColumnName: string;
   columns: Recordable[];
   checkbox?: boolean;
   id: string;
@@ -30,6 +31,7 @@ const emit = defineEmits([
 
 const props = withDefaults(defineProps<LayTableRowProps>(), {
   checkbox: false,
+  childrenColumnName: 'children'
 });
 
 const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
@@ -113,13 +115,13 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
 
             <span
               v-if="
-                expandSpace && !data.children && !slot.expand && index === 0
+                expandSpace && !data[childrenColumnName] && !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[childrenColumnName]) && index === 0"
               class="layui-table-cell-expand-icon"
               :type="expandIconType"
               @click="handleExpand"
@@ -156,13 +158,13 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
 
               <span
                 v-if="
-                  expandSpace && !data.children && !slot.expand && index === 0
+                  expandSpace && !data[childrenColumnName] && !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[childrenColumnName]) && index === 0"
                 class="layui-table-cell-expand-icon"
                 :type="expandIconType"
                 @click="handleExpand"
@@ -189,8 +191,8 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
   </tr>
 
   <!-- 树形结构 -->
-  <template v-if="data.children && isExpand">
+  <template v-if="data[childrenColumnName] && isExpand">
-    <template v-for="(children, index) in data.children" :key="index">
+    <template v-for="(children, index) in data[childrenColumnName]" :key="index">
       <table-row
         :id="id"
         :data="children"

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

@@ -27,12 +27,14 @@ export interface LayTableProps {
   defaultToolbar?: boolean;
   selectedKeys?: Recordable[];
   indentSize?: number;
+  childrenColumnName: string;
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
   id: "id",
   size: "md",
   indentSize: 30,
+  childrenColumnName: "children",
   dataSource: () => [],
   selectedKeys: () => [],
 });
@@ -214,7 +216,7 @@ const childrenExpandSpace = ref(false);
 const currentIndentSize = ref(0);
 
 props.dataSource.map((value: any) => {
-  if (value.children) {
+  if (value[props.childrenColumnName]) {
     childrenExpandSpace.value = true;
   }
 });

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

@@ -16,8 +16,10 @@
       <li> 
         <h3>1.1.4 <span class="layui-badge-rim">2022-05-29</span></h3> 
         <ul>
+          <li>[新增] table 组件 childrenColumnName 属性, 配置 children 子节点为其他字段</li>
+          <li>[新增] table 组件 indent-size 属性, 用于 tree-table 模式控制每一层的缩进宽度</li>
+          <li>[新增] table 组件 children 字段解析, 当字段中存在 children 时会自动转化为树表</li>
           <li>[新增] table 组件 expand 插槽, 内容较多不能一次性完全展示时使用, 参数 data 为当前行数据</li>
-          <li>[新增] table 组件 children 字段解析, 当字段中存在 children 时会自动转化为树表, 通过设置 indentSize 以控制每一层的缩进宽度</li>
           <li>[新增] tree 组件 title 插槽, 参数 data 为当前行数据, 用于自定义节点标题</li>
         </ul> 
       </li>