From 922dc2cc928b3e1849120873991dc55a98ef333a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 30 May 2022 22:53:18 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(table):=20=E6=96=B0=E5=A2=9E=20childr?=
 =?UTF-8?q?enColumnName=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/component/src/component/badge/index.vue    |  4 ++--
 package/component/src/component/table/TableRow.vue | 14 ++++++++------
 package/component/src/component/table/index.vue    |  4 +++-
 .../document/src/document/zh-CN/guide/changelog.md |  4 +++-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/package/component/src/component/badge/index.vue b/package/component/src/component/badge/index.vue
index e8d2c3d1..919dfc0c 100644
--- a/package/component/src/component/badge/index.vue
+++ b/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>
diff --git a/package/component/src/component/table/TableRow.vue b/package/component/src/component/table/TableRow.vue
index d3fefdf9..a93f49ac 100644
--- a/package/component/src/component/table/TableRow.vue
+++ b/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-for="(children, index) in data.children" :key="index">
+  <template v-if="data[childrenColumnName] && isExpand">
+    <template v-for="(children, index) in data[childrenColumnName]" :key="index">
       <table-row
         :id="id"
         :data="children"
diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue
index 431ecf12..52118107 100644
--- a/package/component/src/component/table/index.vue
+++ b/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;
   }
 });
diff --git a/package/document/src/document/zh-CN/guide/changelog.md b/package/document/src/document/zh-CN/guide/changelog.md
index 02ae3362..e7cb8d03 100644
--- a/package/document/src/document/zh-CN/guide/changelog.md
+++ b/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>