From 31d90b7741200b58a1939a97ad7b5ecf874e19c0 Mon Sep 17 00:00:00 2001
From: zhaohuihui <zhaohuihui_yewu@cmss.chinamobile.com>
Date: Wed, 13 Jul 2022 20:55:22 +0800
Subject: [PATCH] fix: checkbox can not change indeterminate in table header
 when select a row

Signed-off-by: zhaohuihui <zhaohuihui_yewu@cmss.chinamobile.com>
---
 src/components/table/table-head.vue | 34 +++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 9a39d949f..a8e02e087 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -17,7 +17,7 @@
                             <span v-if="!column.renderHeader">{{ column.title || '' }}</span>
                             <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
                         </template>
-                        <template v-else-if="column.type === 'selection'"><Checkbox v-if="!column.hideSelectAll" :model-value="isSelectAll" :disabled="isSelectDisabled" @on-change="selectAll"></Checkbox></template>
+                        <template v-else-if="column.type === 'selection'"><Checkbox v-if="!column.hideSelectAll" :indeterminate="indeterminate" :model-value="isSelectAll" :disabled="isSelectDisabled" @on-change="selectAll"></Checkbox></template>
                         <template v-else>
                             <span v-if="!column.renderHeader" :class="{[prefixCls + '-cell-sort']: column.sortable}" @click="column.sortable && handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
                             <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
@@ -123,6 +123,22 @@
                 style.width = `${width}px`;
                 return style;
             },
+            indeterminate () {
+                let isSelectPart = false
+                for (let i in this.objData) {
+                    const objData = this.objData[i]
+                    if (objData._isChecked) {
+                        isSelectPart = true
+                        break
+                    } else if (objData.children && objData.children.length) {
+                        isSelectPart = this.hasChildrenChecked(objData)
+                        if (isSelectPart) {
+                            break;
+                        }
+                    }
+                }
+                return isSelectPart && !this.isSelectAll;
+            },
             isSelectAll () {
                 let isSelectAll = true;
                 if (!this.data.length) isSelectAll = false;
@@ -402,7 +418,21 @@
                     });
                 }
                 return status;
-            }
+            },
+            hasChildrenChecked (objData) {
+                let status = false;
+                if (objData.children && objData.children.length) {
+                    status = !!objData.children.find((row) => {
+                        if (row._isChecked) {
+                            return true;
+                        } else if (row.children && row.children.length) {
+                            return this.hasChildrenChecked(row)
+                        }
+                        return false;
+                    });
+                }
+                return status;
+            },
         }
     };
 </script>