调整代码

src/components/table/header/index.vue

@@ -70,7 +70,15 @@
                 </el-button>
             </template>
             <slot name="operation"></slot>
-            <el-button class="ml10" v-if="showCustomColumn" :icon="Setting" @click="openCustomColumn">列设置</el-button>
+            <el-button
+                class="ml10"
+                v-if="showCustomColumn"
+                :icon="Setting"
+                @mousedown="onCustomColumnMousedown"
+                @click="openCustomColumn"
+            >
+                列设置
+            </el-button>
         </div>
         <el-form
             :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
@@ -167,8 +175,26 @@ watch(
         }, 500)
     }
 )
+let customColumnVisibleOnPress = false
+const onCustomColumnMousedown = () => {
+    const table = tableStore?.table?.ref as any
+    if (!table) return
+    customColumnVisibleOnPress = table.getCustomVisible?.() ?? !!table.reactData?.customStore?.visible
+    if (table.reactData?.customStore) {
+        table.reactData.customStore.activeBtn = true
+    }
+}
 const openCustomColumn = () => {
-    tableStore?.table?.ref?.openCustom?.()
+    const table = tableStore?.table?.ref as any
+    if (!table) return
+    if (table.reactData?.customStore) {
+        table.reactData.customStore.activeBtn = false
+    }
+    if (customColumnVisibleOnPress) {
+        table.closeCustom?.()
+    } else {
+        table.openCustom?.()
+    }
 }
 onMounted(() => {
     if (props.showCustomColumn && tableStore?.table) {

src/components/table/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
         <div v-if="showCustomColumn && !tableStore?.table?.customColumnInHeader" class="table-custom-toolbar">
-            <el-button icon="el-icon-Setting" @click="openCustomColumn">列设置</el-button>
+            <el-button icon="el-icon-Setting" @mousedown="onCustomColumnMousedown" @click="openCustomColumn">列设置</el-button>
         </div>
         <vxe-table
             ref="tableRef"
@@ -135,8 +135,26 @@ const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
     const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
     tableStore.onTableAction('selection-change', records)
 }
+let customColumnVisibleOnPress = false
+const onCustomColumnMousedown = () => {
+    const table = tableRef.value as any
+    if (!table) return
+    customColumnVisibleOnPress = table.getCustomVisible?.() ?? !!table.reactData?.customStore?.visible
+    if (table.reactData?.customStore) {
+        table.reactData.customStore.activeBtn = true
+    }
+}
 const openCustomColumn = () => {
-    tableRef.value?.openCustom?.()
+    const table = tableRef.value as any
+    if (!table) return
+    if (table.reactData?.customStore) {
+        table.reactData.customStore.activeBtn = false
+    }
+    if (customColumnVisibleOnPress) {
+        table.closeCustom?.()
+    } else {
+        table.openCustom?.()
+    }
 }
 const getRef = () => {
     return tableRef.value