refactor: 完善ColumnSetting的操作逻辑

src/components/Table/src/BasicTable.vue

@@ -160,7 +160,7 @@ function handleTableChange(...args) {
   onChange && isFunction(onChange) && onChange.call(undefined, ...args)
 }
 
-const { getViewColumns, getColumns, setCacheColumnsByField, setColumns, getColumnsRef, getCacheColumns } = useColumns(
+const { getViewColumns, getColumns, setCacheColumnsByField, setCacheColumns, setColumns, getColumnsRef, getCacheColumns } = useColumns(
   getProps,
   getPaginationInfo
 )
@@ -292,7 +292,8 @@ const tableAction: TableActionType = {
   scrollTo,
   getSize: () => {
     return unref(getBindValues).size as SizeType
-  }
+  },
+  setCacheColumns
 }
 createTableContext({ ...tableAction, wrapRef, getBindValues })
 

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

@@ -83,7 +83,7 @@
   </Tooltip>
 </template>
 <script lang="ts" setup name="ColumnSetting">
-import type { BasicColumn, ColumnChangeParam } from '../../types/table'
+import type { BasicColumn, BasicTableProps, ColumnChangeParam } from '../../types/table'
 import { ref, reactive, useAttrs, watchEffect, nextTick, unref, computed } from 'vue'
 import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue'
 import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface'
@@ -122,6 +122,10 @@ const table = useTableContext()
 
 const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys')
 let inited = false
+// 是否当前的setColums触发的
+let isSetColumnsFromThis = false
+// 是否当前组件触发的setProps
+let isSetPropsFromThis = false
 
 const cachePlainOptions = ref<Options[]>([])
 const plainOptions = ref<Options[] | any>([])
@@ -136,6 +140,8 @@ const state = reactive<State>({
   defaultCheckList: []
 })
 
+/** 缓存初始化props */
+let cacheTableProps: Partial<BasicTableProps<any>> = {}
 const checkIndex = ref(false)
 const checkSelect = ref(false)
 
@@ -148,7 +154,9 @@ const getValues = computed(() => {
 watchEffect(() => {
   const columns = table.getColumns()
   setTimeout(() => {
-    if (columns.length && !state.isInit) {
+    if (isSetColumnsFromThis) {
+      isSetColumnsFromThis = false
+    } else if (columns.length) {
       init()
     }
   }, 0)
@@ -156,6 +164,11 @@ watchEffect(() => {
 
 watchEffect(() => {
   const values = unref(getValues)
+  if (isSetPropsFromThis) {
+    isSetPropsFromThis = false
+  } else {
+    cacheTableProps = cloneDeep(values)
+  }
   checkIndex.value = !!values.showIndexColumn
   checkSelect.value = !!values.rowSelection
 })
@@ -172,8 +185,17 @@ function getColumns() {
   return ret
 }
 
-function init() {
-  const columns = getColumns()
+async function init(isReset = false) {
+  // Sortablejs存在bug，不知道在哪个步骤中会向el append了一个childNode，因此这里先清空childNode
+  // 有可能复现上述问题的操作：拖拽一个元素，快速的上下移动，最后放到最后的位置中松手
+  plainOptions.value = []
+  const columnListEl = unref(columnListRef)
+  if (columnListEl && (columnListEl as any).$el) {
+    const el = (columnListEl as any).$el as Element
+    Array.from(el.children).forEach((item) => el.removeChild(item))
+  }
+  await nextTick()
+  const columns = isReset ? cloneDeep(cachePlainOptions.value) : getColumns()
 
   const checkList = table
     .getColumns({ ignoreAction: true, ignoreIndex: true })
@@ -185,30 +207,24 @@ function init() {
     })
     .filter(Boolean) as string[]
 
-  if (!plainOptions.value.length) {
-    plainOptions.value = columns
-    plainSortOptions.value = columns
-    cachePlainOptions.value = columns
-    state.defaultCheckList = checkList
-  } else {
-    // const fixedColumns = columns.filter((item) =>
-    //   Reflect.has(item, 'fixed')
-    // ) as BasicColumn[];
-
-    unref(plainOptions).forEach((item: BasicColumn) => {
-      const findItem = columns.find((col: BasicColumn) => col.dataIndex === item.dataIndex)
-      if (findItem) {
-        item.fixed = findItem.fixed
-      }
-    })
-  }
-  state.isInit = true
+  plainOptions.value = columns
+  plainSortOptions.value = columns
+  // 更新缓存配置
+  table.setCacheColumns?.(columns)
+  !isReset && (cachePlainOptions.value = cloneDeep(columns))
+  state.defaultCheckList = checkList
+  state.checkedList = checkList
+  // 是否列展示全选
+  state.checkAll = checkList.length === columns.length
+  inited = false
+  handleVisibleChange()
   state.checkedList = checkList
 }
 
 // checkAll change
 function onCheckAllChange(e: CheckboxChangeEvent) {
-  const checkList = plainOptions.value.map((item) => item.value)
+  const checkList = plainSortOptions.value.map((item) => item.value)
+  plainSortOptions.value.forEach((item) => ((item as BasicColumn).defaultHidden = !e.target.checked))
   if (e.target.checked) {
     state.checkedList = checkList
     setColumns(checkList)
@@ -233,6 +249,9 @@ function onChange(checkedList: string[]) {
   checkedList.sort((prev, next) => {
     return sortList.indexOf(prev) - sortList.indexOf(next)
   })
+  unref(plainSortOptions).forEach((item) => {
+    ;(item as BasicColumn).defaultHidden = !checkedList.includes(item.value)
+  })
   setColumns(checkedList)
 }
 
@@ -240,11 +259,14 @@ let sortable: Sortable
 let sortableOrder: string[] = []
 // reset columns
 function reset() {
-  state.checkedList = [...state.defaultCheckList]
-  state.checkAll = true
-  plainOptions.value = unref(cachePlainOptions)
-  plainSortOptions.value = unref(cachePlainOptions)
-  setColumns(table.getCacheColumns())
+  setColumns(cachePlainOptions.value)
+  init(true)
+  checkIndex.value = !!cacheTableProps.showIndexColumn
+  checkSelect.value = !!cacheTableProps.rowSelection
+  table.setProps({
+    showIndexColumn: checkIndex.value,
+    rowSelection: checkSelect.value ? defaultRowSelection : undefined
+  })
   sortable.sort(sortableOrder)
 }
 
@@ -280,7 +302,7 @@ function handleVisibleChange() {
 
         plainSortOptions.value = columns
 
-        setColumns(columns.map((col: Options) => col.value).filter((value: string) => state.checkedList.includes(value)))
+        setColumns(columns.filter((item) => state.checkedList.includes(item.value)))
       }
     })
     // 记录原始order 序列
@@ -291,6 +313,8 @@ function handleVisibleChange() {
 
 // Control whether the serial number column is displayed
 function handleIndexCheckChange(e: CheckboxChangeEvent) {
+  isSetPropsFromThis = true
+  isSetColumnsFromThis = true
   table.setProps({
     showIndexColumn: e.target.checked
   })
@@ -298,6 +322,8 @@ function handleIndexCheckChange(e: CheckboxChangeEvent) {
 
 // Control whether the check box is displayed
 function handleSelectCheckChange(e: CheckboxChangeEvent) {
+  isSetPropsFromThis = true
+  isSetColumnsFromThis = true
   table.setProps({
     rowSelection: e.target.checked ? defaultRowSelection : undefined
   })
@@ -317,11 +343,14 @@ function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') {
   if (isFixed && !item.width) {
     item.width = 100
   }
+  updateSortOption(item)
   table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed })
   setColumns(columns)
 }
 
 function setColumns(columns: BasicColumn[] | string[]) {
+  isSetPropsFromThis = true
+  isSetColumnsFromThis = true
   table.setColumns(columns)
   const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => {
     const visible =
@@ -335,6 +364,14 @@ function setColumns(columns: BasicColumn[] | string[]) {
 function getPopupContainer() {
   return isFunction(attrs.getPopupContainer) ? attrs.getPopupContainer() : getParentContainer()
 }
+
+function updateSortOption(column: BasicColumn) {
+  plainSortOptions.value.forEach((item) => {
+    if (item.value === column.dataIndex) {
+      Object.assign(item, column)
+    }
+  })
+}
 </script>
 <style lang="less">
 @prefix-cls: ~'@{namespace}-basic-column-setting';

src/components/Table/src/hooks/useColumns.ts

@@ -251,6 +251,10 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>, getPagination
   function getCacheColumns() {
     return cacheColumns
   }
+  function setCacheColumns(columns: BasicColumn[]) {
+    if (!isArray(columns)) return
+    cacheColumns = columns.filter((item) => !item.flag)
+  }
 
   return {
     getColumnsRef,
@@ -258,7 +262,8 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>, getPagination
     getColumns,
     setColumns,
     getViewColumns,
-    setCacheColumnsByField
+    setCacheColumnsByField,
+    setCacheColumns
   }
 }
 

src/components/Table/src/types/table.ts

@@ -116,6 +116,7 @@ export interface TableActionType {
   setShowPagination: (show: boolean) => Promise<void>
   getShowPagination: () => boolean
   setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
+  setCacheColumns?: (columns: BasicColumn[]) => void
 }
 
 export interface FetchSetting {