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(),