From 2875a97b70974a379ac6ea15665ad7fe0c3ac747 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Fri, 17 Sep 2021 15:44:39 +0800
Subject: [PATCH] fix(table): `clickToRowSelect` support `disabled` checkbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复`clickToRowSelect`会无视行选择框disabled状态的问题
---
 CHANGELOG.zh_CN.md                             |  1 +
 src/components/Table/src/hooks/useCustomRow.ts |  8 ++++++++
 src/views/demo/table/TreeTable.vue             | 12 +++++++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 249cbfdf..a1011bf3 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -8,6 +8,7 @@
   - 修复可编辑单元格某些情况下无法提交的问题
   - 修复`inset`属性不起作用的问题
   - 修复`useTable`与`BasicTable`实例的`reload`方法`await`表现不一致的问题
+  - 修复`clickToRowSelect`会无视行选择框 disabled 状态的问题
 - **BasicModal**
   - 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题
   - 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题
diff --git a/src/components/Table/src/hooks/useCustomRow.ts b/src/components/Table/src/hooks/useCustomRow.ts
index 8dc4921e..56187208 100644
--- a/src/components/Table/src/hooks/useCustomRow.ts
+++ b/src/components/Table/src/hooks/useCustomRow.ts
@@ -46,6 +46,14 @@ export function useCustomRow(
 
           const isCheckbox = rowSelection.type === 'checkbox';
           if (isCheckbox) {
+            // 找到tr
+            const tr: HTMLElement = (e as MouseEvent)
+              .composedPath?.()
+              .find((dom: HTMLElement) => dom.tagName === 'TR') as HTMLElement;
+            if (!tr) return;
+            // 找到Checkbox，检查是否为disabled
+            const checkBox = tr.querySelector('input[type=checkbox]');
+            if (!checkBox || checkBox.hasAttribute('disabled')) return;
             if (!keys.includes(key)) {
               setSelectedRowKeys([...keys, key]);
               return;
diff --git a/src/views/demo/table/TreeTable.vue b/src/views/demo/table/TreeTable.vue
index a4e2800d..88afe637 100644
--- a/src/views/demo/table/TreeTable.vue
+++ b/src/views/demo/table/TreeTable.vue
@@ -19,7 +19,17 @@
       const [register, { expandAll, collapseAll }] = useTable({
         title: '树形表格',
         isTreeTable: true,
-        rowSelection: { type: 'checkbox' },
+        rowSelection: {
+          type: 'checkbox',
+          getCheckboxProps(record: Recordable) {
+            // Demo: 第一行（id为0）的选择框禁用
+            if (record.id === '0') {
+              return { disabled: true };
+            } else {
+              return { disabled: false };
+            }
+          },
+        },
         titleHelpMessage: '树形组件不能和序列号列同时存在',
         columns: getBasicColumns(),
         dataSource: getTreeTableData(),