fix(pro:table): column visible change should be trigger onColumnsChan…

…ge (#1327)
IDuxFE · Dec 2, 2022 · d0fb7fd · d0fb7fd
1 parent 57c5a7f
commit d0fb7fd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
diff --git 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<VKey, ProTableColumn>()
     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
@@ -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}
               />
             )}
           </div>

diff --git 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
@@ -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;