diff --git a/packages/pro/table/src/composables/useColumns.ts b/packages/pro/table/src/composables/useColumns.ts index 6aac6e8ff..80d776cec 100644 --- a/packages/pro/table/src/composables/useColumns.ts +++ b/packages/pro/table/src/composables/useColumns.ts @@ -24,7 +24,7 @@ export interface ColumnsContext { export function useColumns(props: ProTableProps, config: ProTableConfig): ColumnsContext { const originalColumns = computed(() => props.columns) - const [mergedColumns, setMergedColumns] = useState(mergeColumns(originalColumns.value, config), false) + const [mergedColumns, setMergedColumns] = useState(mergeColumns(originalColumns.value, config)) const mergedColumnMap = computed(() => { const map = new Map() loopColumns(mergedColumns.value, column => map.set(column.key!, column)) diff --git a/packages/pro/table/src/contents/LayoutToolContent.tsx b/packages/pro/table/src/contents/LayoutToolContent.tsx index 5340df58e..cedaffba3 100644 --- a/packages/pro/table/src/contents/LayoutToolContent.tsx +++ b/packages/pro/table/src/contents/LayoutToolContent.tsx @@ -50,13 +50,24 @@ export default defineComponent({ setSearchValue(inputValue) } - const handleCheckAll = (checked: boolean) => + const handleCheckAll = (checked: boolean) => { loopColumns(mergedColumns.value, column => { // undefined or true if (column.changeVisible !== false) { column.visible = checked } }) + handleFixedChange() + } + + const handleFixedChange = () => { + const { startColumns, centerColumns, endColumns } = groupColumns(mergedColumns.value) + setMergedColumns([...startColumns, ...centerColumns, ...endColumns]) + } + + const handleVisibleChange = () => { + setMergedColumns([...mergedColumns.value]) + } return () => { const { startColumns, centerColumns, endColumns } = groupColumns(mergedColumns.value) @@ -83,11 +94,6 @@ export default defineComponent({ } } - const handleFixedChange = () => { - const { startColumns, centerColumns, endColumns } = groupColumns(mergedColumns.value) - setMergedColumns([...startColumns, ...centerColumns, ...endColumns]) - } - const settingLength = mergedColumns.value.length const hiddenLength = hiddenColumns.value.length const checked = hiddenLength === 0 && settingLength !== 0 @@ -121,6 +127,7 @@ export default defineComponent({ title={startPinTitle} onDrop={handleDrop} onFixedChange={handleFixedChange} + onVisibleChange={handleVisibleChange} /> )} {(!withFixed || centerColumns.length > 0) && ( @@ -131,6 +138,7 @@ export default defineComponent({ title={withFixed ? noPinTitle : undefined} onDrop={handleDrop} onFixedChange={handleFixedChange} + onVisibleChange={handleVisibleChange} /> )} {hasEndFixed && ( @@ -141,6 +149,7 @@ export default defineComponent({ title={endPinTitle} onDrop={handleDrop} onFixedChange={handleFixedChange} + onVisibleChange={handleVisibleChange} /> )} diff --git a/packages/pro/table/src/contents/LayoutToolTree.tsx b/packages/pro/table/src/contents/LayoutToolTree.tsx index d308757cb..7c701f3d4 100644 --- a/packages/pro/table/src/contents/LayoutToolTree.tsx +++ b/packages/pro/table/src/contents/LayoutToolTree.tsx @@ -23,6 +23,7 @@ export default defineComponent({ title: { type: String, default: undefined }, onDrop: { type: Function, required: true }, onFixedChange: { type: Function, required: true }, + onVisibleChange: { type: Function, required: true }, }, setup(props) { const key = useKey() @@ -46,6 +47,7 @@ export default defineComponent({ currColumn = parent } } + props.onVisibleChange() } const onDrop = (options: TreeDragDropOptions) => { @@ -66,7 +68,7 @@ export default defineComponent({ loopColumns(column.children, child => { child.fixed = fixed }) - props.onFixedChange!() + props.onFixedChange() } return () => { diff --git a/packages/pro/table/style/index.less b/packages/pro/table/style/index.less index 6a6b1080f..dc83b8656 100644 --- a/packages/pro/table/style/index.less +++ b/packages/pro/table/style/index.less @@ -2,20 +2,8 @@ // .reset-component(); &-layout-tool { - .@{popover-prefix}-wrapper { - padding: @spacing-sm @spacing-xs; - min-width: 240px; - } - - &-search-wrapper, - &-select-wrapper, - &-tree-wrapper { - padding: 0 @spacing-sm; - } - .@{header-prefix} { - padding-left: @spacing-sm; - padding-right: @spacing-sm; + padding-bottom: 0; &-title { color: @text-color;