From 54d14056462566521f2528480c13fb24279156ae Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Sat, 28 Nov 2020 19:15:06 +0800
Subject: [PATCH] fix: fix table column settings not displayed by setting

---
 CHANGELOG.zh_CN.md                            |  2 ++
 .../Table/src/components/TableSetting.vue     | 21 ++++++++++++-------
 vite.config.ts                                |  2 +-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 04d9bf943..24e3a8b5b 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -31,6 +31,8 @@
 - form: 修复表单校验先设置在校验及控制台错误信息问题
 - `modal`&`drawer` 修复组件传递数组参数问题
 - form: 修复`updateSchema`赋值含有`[]`时不生效
+- table: 修复表格 `TableAction` 图标显示问题
+- table: 修复表格列设置通过`setColumns`设置不显示
 
 ### 🎫 Chores
 
diff --git a/src/components/Table/src/components/TableSetting.vue b/src/components/Table/src/components/TableSetting.vue
index 09701f596..90bc0729b 100644
--- a/src/components/Table/src/components/TableSetting.vue
+++ b/src/components/Table/src/components/TableSetting.vue
@@ -77,7 +77,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, reactive, toRefs, PropType, computed } from 'vue';
+  import { defineComponent, ref, reactive, toRefs, PropType, computed, watchEffect } from 'vue';
   import { injectTable } from '../hooks/useProvinceTable';
   import { Tooltip, Divider, Dropdown, Menu, Popover, Checkbox } from 'ant-design-vue';
   import {
@@ -132,7 +132,7 @@
       const { toggleFullscreen, isFullscreenRef } = useFullscreen(table.wrapRef);
       const selectedKeysRef = ref<SizeType[]>([table.getSize()]);
 
-      let plainOptions: Options[] = [];
+      const plainOptions = ref<Options[]>([]);
       const state = reactive<State>({
         indeterminate: false,
         checkAll: true,
@@ -142,6 +142,12 @@
 
       const { t } = useI18n('component.table');
 
+      watchEffect(() => {
+        const columns = table.getColumns();
+        if (columns.length) {
+          init();
+        }
+      });
       function init() {
         let ret: Options[] = [];
         table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => {
@@ -150,7 +156,8 @@
             value: (item.dataIndex || item.title) as string,
           });
         });
-        plainOptions = ret;
+
+        plainOptions.value = ret;
         const checkList = table
           .getColumns()
           .map((item) => item.dataIndex || item.title) as string[];
@@ -171,7 +178,7 @@
 
       function onCheckAllChange(e: ChangeEvent) {
         state.indeterminate = false;
-        const checkList = plainOptions.map((item) => item.value);
+        const checkList = plainOptions.value.map((item) => item.value);
         if (e.target.checked) {
           state.checkedList = checkList;
           table.setColumns(checkList);
@@ -182,8 +189,9 @@
       }
 
       function onChange(checkedList: string[]) {
-        state.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
-        state.checkAll = checkedList.length === plainOptions.length;
+        const len = plainOptions.value.length;
+        state.indeterminate = !!checkedList.length && checkedList.length < len;
+        state.checkAll = checkedList.length === len;
         table.setColumns(checkedList);
       }
 
@@ -207,7 +215,6 @@
         }
       );
 
-      init();
       return {
         redo: () => table.reload(),
         handleTitleClick,
diff --git a/vite.config.ts b/vite.config.ts
index e81d5126a..781ecc775 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -55,7 +55,7 @@ const viteConfig: UserConfig = {
    * Available options are 'terser' or 'esbuild'.
    * @default 'terser'
    */
-  minify: isDevFn() ? 'esbuild' : 'terser',
+  minify: isDevFn() ? false : 'terser',
   /**
    * Base public path when served in production.
    * @default '/'