diff --git a/examples/table/demos/editable-cell.vue b/examples/table/demos/editable-cell.vue index 70eb7c41f0..e3cebfdaa7 100644 --- a/examples/table/demos/editable-cell.vue +++ b/examples/table/demos/editable-cell.vue @@ -89,18 +89,23 @@ const columns = computed(() => [ edit: { component: Select, // props, 透传全部属性到 Select 组件 - props: { - multiple: true, - minCollapsedNum: 1, - options: [ - { label: 'A', value: 'A' }, - { label: 'B', value: 'B' }, - { label: 'C', value: 'C' }, - { label: 'D', value: 'D' }, - { label: 'E', value: 'E' }, - { label: 'G', value: 'G' }, - { label: 'H', value: 'H' }, - ], + // props 为函数时，参数有：col, row, rowIndex, colIndex, editedRow。一般用于实现编辑组件之间的联动 + props: ({ col, row, rowIndex, colIndex, editedRow }) => { + console.log(col, row, rowIndex, colIndex, editedRow); + return { + multiple: true, + minCollapsedNum: 1, + options: [ + { label: 'A', value: 'A' }, + { label: 'B', value: 'B' }, + { label: 'C', value: 'C' }, + { label: 'D', value: 'D' }, + { label: 'E', value: 'E' }, + // 如果框架选择了 React，则 Letters 隐藏 G 和 H + { label: 'G', value: 'G', show: () => editedRow.framework !== 'React' }, + { label: 'H', value: 'H', show: () => editedRow.framework !== 'React' }, + ].filter((t) => (t.show === undefined ? true : t.show())), + }; }, // abortEditOnEvent: ['onChange'], onEdited: (context) => { diff --git a/examples/table/demos/tree-select.vue b/examples/table/demos/tree-select.vue index 237fe65ea5..4668282a42 100644 --- a/examples/table/demos/tree-select.vue +++ b/examples/table/demos/tree-select.vue @@ -78,7 +78,7 @@ const columns = [ // 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删） // 这种方式禁用行选中，行文本不会变灰 - checkProps: ({ row }) => ({ disabled: row.status !== 0 }), + checkProps: ({ row }) => ({ disabled: !row.childrenList && row.status !== 0 }), // 自由调整宽度，如果发现元素看不见，请加大宽度 width: 20, }, diff --git a/examples/table/table.md b/examples/table/table.md index aa890d4b03..3c229ec5a8 100644 --- a/examples/table/table.md +++ b/examples/table/table.md @@ -103,8 +103,8 @@ defaultDisplayColumns | Array | - | 列配置功能中，当前显示的列。 dragSort | String | - | 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过专门的 拖拽手柄 进行 行拖拽排序。值为 `col` 表示列顺序拖拽。`drag-col` 已废弃，请勿使用。可选项：row/row-handler/col/drag-col | N dragSortOptions | Object | - | 拖拽排序扩展参数，具体参数见 [Sortable](https://github.com/SortableJS/Sortable)。TS 类型：`SortableOptions` | N expandedRow | String / Slot / Function | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] | BaseTableCol[] }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N -expandedRowKeys | Array | [] | 展开行。支持语法糖 `v-model:expandedRowKeys`。TS 类型：`Array` | N -defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array` | N +expandedRowKeys | Array | - | 展开行。支持语法糖 `v-model:expandedRowKeys`。TS 类型：`Array` | N +defaultExpandedRowKeys | Array | - | 展开行。非受控属性。TS 类型：`Array` | N expandIcon | Boolean / Slot / Function | true | 用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`。TS 类型：`boolean | TNode>` `interface ExpandArrowRenderParams { row: T; index: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N expandOnRowClick | Boolean | - | 是否允许点击行展开 | N filterIcon | Slot / Function | - | 自定义过滤图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N @@ -112,9 +112,10 @@ filterRow | String / Slot / Function | - | 自定义过滤状态行及清空筛 filterValue | Object | - | 过滤数据的值。支持语法糖 `v-model:filterValue`。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N defaultFilterValue | Object | - | 过滤数据的值。非受控属性。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N hideSortTips | Boolean | - | 隐藏排序文本提示，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `false` | N +indeterminateSelectedRowKeys | Array | - | 半选状态行。选中行请更为使用 `selectedRowKeys` 控制。TS 类型：`Array` | N multipleSort | Boolean | false | 是否支持多列排序 | N -selectedRowKeys | Array | - | 选中的行，控制属性。支持语法糖 `v-model:selectedRowKeys`。TS 类型：`Array` | N -defaultSelectedRowKeys | Array | - | 选中的行，控制属性。非受控属性。TS 类型：`Array` | N +selectedRowKeys | Array | - | 选中的行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制。支持语法糖 `v-model:selectedRowKeys`。TS 类型：`Array` | N +defaultSelectedRowKeys | Array | - | 选中的行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制。非受控属性。TS 类型：`Array` | N sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。支持语法糖 `v-model:sort`。TS 类型：`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。非受控属性。TS 类型：`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N sortIcon | Slot / Function | - | 自定义排序图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N diff --git a/src/select/select-panel.tsx b/src/select/select-panel.tsx index 06d6562716..36f0064a00 100644 --- a/src/select/select-panel.tsx +++ b/src/select/select-panel.tsx @@ -115,6 +115,7 @@ export default defineComponent({ `${COMPONENT_NAME.value}__dropdown-inner`, `${COMPONENT_NAME.value}__dropdown-inner--size-${dropdownInnerSize.value}`, ]} + onClick={(e) => e.stopPropagation()} > {renderTNodeJSX('panelTopContent')} {/* create option */} diff --git a/src/table/enhanced-table.tsx b/src/table/enhanced-table.tsx index e8c7e6278d..3b2d769d75 100644 --- a/src/table/enhanced-table.tsx +++ b/src/table/enhanced-table.tsx @@ -21,7 +21,7 @@ export default defineComponent({ const treeDataMap = ref(store.value.treeDataMap); - const { onInnerSelectChange } = useTreeSelect(props, treeDataMap); + const { tIndeterminateSelectedRowKeys, onInnerSelectChange } = useTreeSelect(props, treeDataMap); // 影响列和单元格内容的因素有：树形节点需要添加操作符 [+] [-] const getColumns = (columns: PrimaryTableCol[]) => { @@ -61,6 +61,7 @@ export default defineComponent({ store, dataSource, tColumns, + tIndeterminateSelectedRowKeys, onDragSortChange, onInnerSelectChange, /** 对外暴露的方法 */ @@ -73,6 +74,8 @@ export default defineComponent({ ...this.$props, data: this.dataSource, columns: this.tColumns, + // 半选状态节点 + indeterminateSelectedRowKeys: this.tIndeterminateSelectedRowKeys, // 树形结构不允许本地数据分页 disableDataPage: Boolean(this.tree && Object.keys(this.tree).length), onSelectChange: this.onInnerSelectChange, diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts index f7757df4fb..c797c294d8 100644 --- a/src/table/hooks/tree-store.ts +++ b/src/table/hooks/tree-store.ts @@ -59,6 +59,21 @@ class TableTreeStore { this.initialTreeDataMap(this.treeDataMap, dataSource, columns[0], keys); } + /** + * 获取所有节点的唯一标识 + */ + getAllUniqueKeys(data: T[], keys: KeysType, arr: T[] = []) { + for (let i = 0, len = data.length; i < len; i++) { + const item = data[i]; + arr.push(get(item, keys.rowKey)); + const children = get(item, keys.childrenKey); + if (children?.length) { + this.getAllUniqueKeys(children, keys, arr); + } + } + return arr; + } + toggleExpandData(p: { rowIndex: number; row: T }, dataSource: T[], keys: KeysType) { if (!p) { log.error('EnhancedTable', 'the node you want to toggleExpand doest not exist in `data`'); diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx index 2b63631ded..3e931bf114 100644 --- a/src/table/hooks/useRowExpand.tsx +++ b/src/table/hooks/useRowExpand.tsx @@ -22,7 +22,7 @@ export default function useRowExpand(props: TdPrimaryTableProps, context: SetupC // controlled and uncontrolled const [tExpandedRowKeys, setTExpandedRowKeys] = useDefaultValue( expandedRowKeys, - props.defaultExpandedRowKeys, + props.defaultExpandedRowKeys || [], props.onExpandChange, 'expandedRowKeys', ); diff --git a/src/table/hooks/useRowSelect.tsx b/src/table/hooks/useRowSelect.tsx index 4eba0aaa22..3cadff8a49 100644 --- a/src/table/hooks/useRowSelect.tsx +++ b/src/table/hooks/useRowSelect.tsx @@ -94,7 +94,12 @@ export default function useRowSelect(props: TdPrimaryTableProps) { onChange: () => handleSelectChange(row), }; if (column.type === 'single') return ; - if (column.type === 'multiple') return ; + if (column.type === 'multiple') { + const isIndeterminate = props.indeterminateSelectedRowKeys?.length + ? props.indeterminateSelectedRowKeys.includes(get(row, props.rowKey)) + : false; + return ; + } return null; } @@ -126,7 +131,7 @@ export default function useRowSelect(props: TdPrimaryTableProps) { const disabledSelectedRowKeys = selectedRowKeys.value?.filter((id) => !canSelectedRowKeys.includes(id)) || []; const allIds = checked ? [...disabledSelectedRowKeys, ...canSelectedRowKeys] : [...disabledSelectedRowKeys]; setTSelectedRowKeys(allIds, { - selectedRowData: filterDataByIds(props.data, allIds, reRowKey), + selectedRowData: checked ? filterDataByIds(props.data, allIds, reRowKey) : [], type: checked ? 'check' : 'uncheck', currentRowKey: 'CHECK_ALL_BOX', }); diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index ce70a247cd..af97b18960 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -55,16 +55,18 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC }); }; + const uniqueKeys = computed(() => store.value?.getAllUniqueKeys(data.value, rowDataKeys.value)?.join() || ''); + watch( - [data], - ([data]) => { - if (!data) return; + [uniqueKeys], + () => { + if (!data.value) return; // 如果没有树形解构，则不需要相关逻辑 - if (!props.tree || !Object.keys(props.tree).length) { - dataSource.value = data; + if (!props.tree) { + dataSource.value = data.value; return; } - let newVal = cloneDeep(data); + let newVal = cloneDeep(data.value); store.value.initialTreeStore(newVal, props.columns, rowDataKeys.value); if (props.tree?.defaultExpandAll) { newVal = store.value.expandAll(newVal, rowDataKeys.value); @@ -80,7 +82,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC // }); onUnmounted(() => { - if (!props.tree || !Object.keys(props.tree).length) return; + if (!props.tree) return; store.value.treeDataMap?.clear(); store.value = null; }); @@ -130,7 +132,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC } function formatTreeColumn(col: PrimaryTableCol): PrimaryTableCol { - if (!props.tree || !Object.keys(props.tree).length || col.colKey !== treeNodeCol.value.colKey) return col; + if (!props.tree || col.colKey !== treeNodeCol.value.colKey) return col; const newCol = { ...treeNodeCol.value }; newCol.cell = (h, p) => { const cellInfo = renderCell({ ...p, col: { ...treeNodeCol.value } }, context.slots); diff --git a/src/table/hooks/useTreeSelect.tsx b/src/table/hooks/useTreeSelect.tsx index 06d49d2b9b..b502cdf054 100644 --- a/src/table/hooks/useTreeSelect.tsx +++ b/src/table/hooks/useTreeSelect.tsx @@ -1,40 +1,53 @@ -import { computed, toRefs, Ref } from 'vue'; +import { computed, toRefs, ref, Ref, watch } from 'vue'; import get from 'lodash/get'; +import intersection from 'lodash/intersection'; import { TdEnhancedTableProps, TdPrimaryTableProps, TableRowData, PrimaryTableCol } from '../type'; import TableTreeStore, { KeysType, TableTreeDataMap } from './tree-store'; import useDefaultValue from '../../hooks/useDefaultValue'; -export const childrenMap = new Map(); - export interface GetChildrenDataReturnValue { allChildren: Array; allChildrenKeys: Array; + leafNodeKeys: Array; } +// 保存子节点信息，避免重复计算 +export const childrenMap = new Map(); + export function getChildrenData( treeDataMap: InstanceType['treeDataMap'], data: TableRowData, - childrenKey: string, - rowKey: string, + keys: { childrenKey: string; rowKey: string }, r?: GetChildrenDataReturnValue, ): GetChildrenDataReturnValue { if (childrenMap.get(data)) return childrenMap.get(data); - const result = r || { allChildren: [], allChildrenKeys: [] }; - const children = get(data, childrenKey); + const result = r || { allChildren: [], allChildrenKeys: [], leafNodeKeys: [] }; + const children = get(data, keys.childrenKey); if (!children || !children.length) return result; - const selectableChildren = children.filter((item: TableRowData) => !treeDataMap.get(get(item, rowKey))?.disabled); - result.allChildren = result.allChildren.concat(selectableChildren); - const childrenKeys = selectableChildren.map((item: TableRowData) => get(item, rowKey)); - result.allChildrenKeys = result.allChildrenKeys.concat(childrenKeys); + const selectableChildren = children.filter( + (item: TableRowData) => !treeDataMap.get(get(item, keys.rowKey))?.disabled, + ); + result.allChildren = [...new Set(result.allChildren.concat(selectableChildren))]; for (let i = 0, len = children.length; i < len; i++) { const tItem = children[i]; - const c = get(tItem, childrenKey); + const c = get(tItem, keys.childrenKey); if (c?.length) { - const nextLevelData = getChildrenData(treeDataMap, tItem, childrenKey, rowKey, result); - result.allChildren = result.allChildren.concat(nextLevelData.allChildren); - result.allChildrenKeys = result.allChildrenKeys.concat(nextLevelData.allChildrenKeys); + const nextLevelData = getChildrenData(treeDataMap, tItem, keys, result); + result.allChildren = [...new Set(result.allChildren.concat(nextLevelData.allChildren))]; } } + // 避免使用 forEach，减少上下文消耗 + for (let i = 0, len = result.allChildren.length; i < len; i++) { + const item = result.allChildren[i]; + const children = get(item, keys.childrenKey); + const rowValue = get(item, keys.rowKey); + result.allChildrenKeys.push(rowValue); + if (!children || !children.length) { + result.leafNodeKeys.push(rowValue); + } + } + result.allChildrenKeys = [...new Set(result.allChildrenKeys)]; + result.leafNodeKeys = [...new Set(result.leafNodeKeys)]; return result; } @@ -87,11 +100,13 @@ export function getRowDataByKeys(p: GetRowDataParams) { type SelectChangeParams = Parameters; export default function useTreeSelect(props: TdEnhancedTableProps, treeDataMap: Ref) { - const { selectedRowKeys } = toRefs(props); - // eslint-disable-next-line - const [_, setTSelectedRowKeys] = useDefaultValue( + const { selectedRowKeys, tree, data, indeterminateSelectedRowKeys } = toRefs(props); + // 半选状态的节点：子节点选中至少一个，且没有全部选中 + const tIndeterminateSelectedRowKeys = ref<(string | number)[]>([]); + + const [tSelectedRowKeys, setTSelectedRowKeys] = useDefaultValue( selectedRowKeys, - props.defaultSelectedRowKeys, + props.defaultSelectedRowKeys || [], props.onSelectChange, 'selectedRowKeys', ); @@ -100,7 +115,75 @@ export default function useTreeSelect(props: TdEnhancedTableProps, treeDataMap: childrenKey: props.tree?.childrenKey || 'children', })); + watch([tree, treeDataMap, data, tSelectedRowKeys], ([tree, treeDataMap]) => { + if (!tree || !treeDataMap.size || tree.checkStrictly) return; + updateIndeterminateState(); + }); + + function updateIndeterminateState() { + if (!tree.value || tree.value.checkStrictly) return; + if (!tSelectedRowKeys.value.length) { + tIndeterminateSelectedRowKeys.value = []; + return; + } + const keys: Array = []; + const parentMap: { [key: string | number]: any[] } = {}; + for (let i = 0, len = tSelectedRowKeys.value.length; i < len; i++) { + const rowValue = tSelectedRowKeys.value[i]; + const state = treeDataMap.value.get(rowValue); + const children = get(state.row, rowDataKeys.value.childrenKey); + // 根据选中的叶子结点计算父节点半选状态 + if (!children || !children.length) { + let parentTmp = state.parent; + while (parentTmp) { + if (!parentMap[parentTmp.id]) { + parentMap[parentTmp.id] = []; + } + parentMap[parentTmp.id].push(state.row); + const checkedLength = parentMap[parentTmp.id].length; + const { allChildrenKeys } = getChildrenData(treeDataMap.value, parentTmp.row, rowDataKeys.value); + const parentTmpIndex = keys.indexOf(parentTmp.id); + const selectedIndex = tSelectedRowKeys.value.indexOf(parentTmp.id); + if (checkedLength > 0 && checkedLength < allChildrenKeys.length && selectedIndex === -1) { + parentTmpIndex === -1 && keys.push(parentTmp.id); + } else { + parentTmpIndex !== -1 && keys.splice(parentTmpIndex, 1); + } + parentTmp = parentTmp.parent; + } + } + } + tIndeterminateSelectedRowKeys.value = keys; + } + + function updateParentCheckedState( + selectedKeys: (string | number)[], + currentRowKey: string | number, + type: 'check' | 'uncheck', + ) { + if (!tree.value || tree.value.checkStrictly) return; + const keys = [...selectedKeys]; + const state = treeDataMap.value.get(currentRowKey); + let parentTmp = state.parent; + while (parentTmp) { + const { leafNodeKeys } = getChildrenData(treeDataMap.value, parentTmp.row, rowDataKeys.value); + const checkedChildrenKeys = intersection(leafNodeKeys, selectedKeys); + const selectedIndex = keys.indexOf(parentTmp.id); + if (type === 'uncheck') { + selectedIndex !== -1 && keys.splice(selectedIndex, 1); + } else if (checkedChildrenKeys.length === leafNodeKeys.length) { + selectedIndex === -1 && keys.push(parentTmp.id); + } + parentTmp = parentTmp.parent; + } + return keys; + } + function onInnerSelectChange(rowKeys: SelectChangeParams[0], extraData: SelectChangeParams[1]) { + if (!tree.value || tree.value.checkStrictly) { + setTSelectedRowKeys(rowKeys, extraData); + return; + } if (extraData.currentRowKey === 'CHECK_ALL_BOX') { handleSelectAll(extraData); } else { @@ -130,24 +213,14 @@ export default function useTreeSelect(props: TdEnhancedTableProps, treeDataMap: function handleSelect(rowKeys: SelectChangeParams[0], extraData: SelectChangeParams[1]) { let newRowKeys = [...rowKeys]; - if (props?.tree.checkStrictly === false) { + if (props.tree?.checkStrictly === false) { if (extraData?.type === 'check') { - const result = getChildrenData( - treeDataMap.value, - extraData.currentRowData, - rowDataKeys.value.childrenKey, - rowDataKeys.value.rowKey, - ); + const result = getChildrenData(treeDataMap.value, extraData.currentRowData, rowDataKeys.value); const { allChildrenKeys } = result; childrenMap.set(extraData.currentRowData, result); newRowKeys = [...new Set(newRowKeys.concat(allChildrenKeys))]; } else if (extraData?.type === 'uncheck') { - const children = getChildrenData( - treeDataMap.value, - extraData.currentRowData, - rowDataKeys.value.childrenKey, - rowDataKeys.value.rowKey, - ); + const children = getChildrenData(treeDataMap.value, extraData.currentRowData, rowDataKeys.value); const result = removeChildrenKeys({ selectedRowKeys: rowKeys, removeKeys: children.allChildrenKeys, @@ -155,6 +228,7 @@ export default function useTreeSelect(props: TdEnhancedTableProps, treeDataMap: newRowKeys = result.keys; } } + newRowKeys = updateParentCheckedState(newRowKeys, extraData.currentRowKey, extraData.type); const newRowData = getRowDataByKeys({ treeDataMap: treeDataMap.value, selectedRowKeys: newRowKeys }); const newExtraData = { ...extraData, @@ -164,6 +238,10 @@ export default function useTreeSelect(props: TdEnhancedTableProps, treeDataMap: } return { + // 如果存在受控属性 indeterminateSelectedRowKeys 则优先使用；否则使用内部状态：tIndeterminateSelectedRowKeys + tIndeterminateSelectedRowKeys: indeterminateSelectedRowKeys.value + ? indeterminateSelectedRowKeys + : tIndeterminateSelectedRowKeys, onInnerSelectChange, }; } diff --git a/src/table/primary-table-props.ts b/src/table/primary-table-props.ts index 0da43f4553..be2e61ded1 100644 --- a/src/table/primary-table-props.ts +++ b/src/table/primary-table-props.ts @@ -64,7 +64,6 @@ export default { /** 展开行，非受控属性 */ defaultExpandedRowKeys: { type: Array as PropType, - default: (): TdPrimaryTableProps['defaultExpandedRowKeys'] => [], }, /** 用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider` */ expandIcon: { @@ -92,14 +91,18 @@ export default { }, /** 隐藏排序文本提示，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `false` */ hideSortTips: Boolean, + /** 半选状态行。选中行请更为使用 `selectedRowKeys` 控制 */ + indeterminateSelectedRowKeys: { + type: Array as PropType, + }, /** 是否支持多列排序 */ multipleSort: Boolean, - /** 选中的行，控制属性 */ + /** 选中的行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制 */ selectedRowKeys: { type: Array as PropType, default: undefined, }, - /** 选中的行，控制属性，非受控属性 */ + /** 选中的行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制，非受控属性 */ defaultSelectedRowKeys: { type: Array as PropType, }, diff --git a/src/table/type.ts b/src/table/type.ts index a64743c285..5fd07d08c0 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -339,12 +339,10 @@ export interface TdPrimaryTableProps expandedRow?: TNode>; /** * 展开行 - * @default [] */ expandedRowKeys?: Array; /** * 展开行，非受控属性 - * @default [] */ defaultExpandedRowKeys?: Array; /** @@ -376,17 +374,21 @@ export interface TdPrimaryTableProps * 隐藏排序文本提示，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `false` */ hideSortTips?: boolean; + /** + * 半选状态行。选中行请更为使用 `selectedRowKeys` 控制 + */ + indeterminateSelectedRowKeys?: Array; /** * 是否支持多列排序 * @default false */ multipleSort?: boolean; /** - * 选中的行，控制属性 + * 选中的行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制 */ selectedRowKeys?: Array; /** - * 选中的行，控制属性，非受控属性 + * 选中的行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制，非受控属性 */ defaultSelectedRowKeys?: Array; /** diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 883e33e133..82fb5929cb 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -117880,6 +117880,7 @@ exports[`csr snapshot test > csr test ./examples/table/demos/tree.vue 1`] = ` return true; }" class="t-table t-table--row-handler-draggable" + indeterminateselectedrowkeys="" style="position: relative;" tree="[object Object]" > @@ -119331,6 +119332,7 @@ exports[`csr snapshot test > csr test ./examples/table/demos/tree-select.vue 1`] row }) => __vite_ssr_import_0__.createVNode(\\"div\\", null, [__vite_ssr_import_0__.createTextVNode(\\"\\\\u8FD9\\\\u662F\\\\u5C55\\\\u5F00\\\\u9879\\\\u6570\\\\u636E\\\\uFF0C\\\\u6211\\\\u662F \\"), row.key, __vite_ssr_import_0__.createTextVNode(\\" \\\\u53F7\\")])" expandedrowkeys="" + indeterminateselectedrowkeys="" selectedrowkeys="" style="position: relative;" tree="[object Object]" @@ -119589,11 +119591,10 @@ exports[`csr snapshot test > csr test ./examples/table/demos/tree-select.vue 1`] class="" >