fix: #396

src/components/Table/src/components/ColumnSetting.vue

@@ -69,7 +69,7 @@ const initColumns = (columns: TableColumn[], isReStore = false) => {
     }
     return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
   })
-  if (!unref(oldColumns)) {
+  if (!unref(oldColumns)?.length) {
     oldColumns.value = cloneDeep(newColumns)
   }
   settingColumns.value = cloneDeep(newColumns)
@@ -96,7 +96,8 @@ watch(
     initColumns(columns)
   },
   {
-    immediate: true
+    immediate: true,
+    deep: true
   }
 )
 </script>

src/views/Components/Table/UseTableDemo.vue

@@ -3,7 +3,7 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
 import { getTableListApi } from '@/api/table'
-import { ref, reactive, unref } from 'vue'
+import { ref, reactive, unref, onMounted } from 'vue'
 import { ElTag } from 'element-plus'
 import { useTable } from '@/hooks/web/useTable'
 import { BaseButton } from '@/components/Button'
@@ -26,83 +26,91 @@ const { setProps, setColumn, getElTableExpose, addColumn, delColumn, refresh } =
 
 const { t } = useI18n()
 
-const columns = reactive<TableColumn[]>([
+const columns = reactive<TableColumn[]>([])
-  {
+
-    field: 'expand',
+onMounted(() => {
-    type: 'expand',
+  setTimeout(() => {
-    slots: {
+    setProps({
-      default: (data: TableSlotDefault) => {
+      columns: [
-        const { row } = data
+        {
-        return (
+          field: 'expand',
-          <div class="ml-30px">
+          type: 'expand',
-            <div>
+          slots: {
-              {t('tableDemo.title')}：{row.title}
+            default: (data: TableSlotDefault) => {
-            </div>
+              const { row } = data
-            <div>
+              return (
-              {t('tableDemo.author')}：{row.author}
+                <div class="ml-30px">
-            </div>
+                  <div>
-            <div>
+                    {t('tableDemo.title')}：{row.title}
-              {t('tableDemo.displayTime')}：{row.display_time}
+                  </div>
-            </div>
+                  <div>
-          </div>
+                    {t('tableDemo.author')}：{row.author}
-        )
+                  </div>
-      }
+                  <div>
-    }
+                    {t('tableDemo.displayTime')}：{row.display_time}
-  },
+                  </div>
-  {
+                </div>
-    field: 'selection',
+              )
-    type: 'selection'
+            }
-  },
+          }
-  {
+        },
-    field: 'index',
+        {
-    label: t('tableDemo.index'),
+          field: 'selection',
-    type: 'index'
+          type: 'selection'
-  },
+        },
-  {
+        {
-    field: 'title',
+          field: 'index',
-    label: t('tableDemo.title')
+          label: t('tableDemo.index'),
-  },
+          type: 'index'
-  {
+        },
-    field: 'author',
+        {
-    label: t('tableDemo.author')
+          field: 'title',
-  },
+          label: t('tableDemo.title')
-  {
+        },
-    field: 'display_time',
+        {
-    label: t('tableDemo.displayTime')
+          field: 'author',
-  },
+          label: t('tableDemo.author')
-  {
+        },
-    field: 'importance',
+        {
-    label: t('tableDemo.importance'),
+          field: 'display_time',
-    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+          label: t('tableDemo.displayTime')
-      return (
+        },
-        <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
+        {
-          {cellValue === 1
+          field: 'importance',
-            ? t('tableDemo.important')
+          label: t('tableDemo.importance'),
-            : cellValue === 2
+          formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
-              ? t('tableDemo.good')
+            return (
-              : t('tableDemo.commonly')}
+              <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
-        </ElTag>
+                {cellValue === 1
-      )
+                  ? t('tableDemo.important')
-    }
+                  : cellValue === 2
-  },
+                    ? t('tableDemo.good')
-  {
+                    : t('tableDemo.commonly')}
-    field: 'pageviews',
+              </ElTag>
-    label: t('tableDemo.pageviews')
+            )
-  },
+          }
-  {
+        },
-    field: 'action',
+        {
-    label: t('tableDemo.action'),
+          field: 'pageviews',
-    slots: {
+          label: t('tableDemo.pageviews')
-      default: (data) => {
+        },
-        return (
+        {
-          <BaseButton type="primary" onClick={() => actionFn(data)}>
+          field: 'action',
-            {t('tableDemo.action')}
+          label: t('tableDemo.action'),
-          </BaseButton>
+          slots: {
-        )
+            default: (data) => {
-      }
+              return (
-    }
+                <BaseButton type="primary" onClick={() => actionFn(data)}>
-  }
+                  {t('tableDemo.action')}
-])
+                </BaseButton>
+              )
+            }
+          }
+        }
+      ]
+    })
+  }, 2000)
+})
 
 const actionFn = (data: TableSlotDefault) => {
   console.log(data)