fix(table): `clickToRowSelect` support `disabled` checkbox

修复`clickToRowSelect`会无视行选择框disabled状态的问题

fix(table): `clickToRowSelect` support `disabled` checkbox
修复`clickToRowSelect`会无视行选择框disabled状态的问题
无木
1 parent 067753d4
Showing 3 changed files with 20 additions and 1 deletions
CHANGELOG.zh_CN.md
src/components/Table/src/hooks/useCustomRow.ts
src/views/demo/table/TreeTable.vue
@@ -8,6 +8,7 @@
   - 修复可编辑单元格某些情况下无法提交的问题
   - 修复`inset`属性不起作用的问题
   - 修复`useTable`与`BasicTable`实例的`reload`方法`await`表现不一致的问题
+  - 修复`clickToRowSelect`会无视行选择框 disabled 状态的问题
 - **BasicModal**
   - 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题
   - 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题
@@ -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;
@@ -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(),