fix(table): fix the problem that multi-level header configuration does not take effect

vben
1 parent 36a7e70c
Showing 3 changed files with 30 additions and 93 deletions
CHANGELOG.zh_CN.md
src/components/Table/src/hooks/useColumns.ts
src/design/ant/selection.less
@@ -30,6 +30,7 @@
 - 修复`useECharts`在`resize`时不能自适应,报错
 - 修复`useWatermark`在清空后`resize`未删除
 - 修复表单校验问题
+- 修复多级表头配置不生效问题
 ## 2.0.0-rc.8 (2020-11-2)
@@ -23,18 +23,11 @@ export function useColumns(
     }
     let pushIndexColumns = false;
     columns.forEach((item) => {
-      const { key, dataIndex } = item;
-      item.align = item.align || 'center';
-      if (ellipsis) {
-        if (!key) {
-          item.key = dataIndex;
-        }
-        if (!isBoolean(item.ellipsis)) {
-          Object.assign(item, {
-            ellipsis,
-          });
-        }
-      }
+      const { children } = item;
+      handleItem(item, !!ellipsis);
+
+      handleChildren(children, !!ellipsis);
+
       const indIndex = columns.findIndex((column) => column.flag === 'INDEX');
       if (showIndexColumn && !isTreeTable) {
         pushIndexColumns = indIndex === -1;
@@ -88,6 +81,30 @@ export function useColumns(
     cacheColumnsRef.value = columns;
   });
+  function handleItem(item: BasicColumn, ellipsis: boolean) {
+    const { key, dataIndex } = item;
+    item.align = item.align || 'center';
+    if (ellipsis) {
+      if (!key) {
+        item.key = dataIndex;
+      }
+      if (!isBoolean(item.ellipsis)) {
+        Object.assign(item, {
+          ellipsis,
+        });
+      }
+    }
+  }
+
+  function handleChildren(children: BasicColumn[] | undefined, ellipsis: boolean) {
+    if (!children) return;
+    children.forEach((item) => {
+      const { children } = item;
+      handleItem(item, ellipsis);
+      handleChildren(children, ellipsis);
+    });
+  }
+
   function setColumns(columns: BasicColumn[] | string[]) {
     if (!isArray(columns)) return;
-.ant-radio {
-  &-inner {
-    border-color: @text-color-base;
-
-    &::after {
-      top: 1px;
-      left: 1px;
-      width: 12px;
-      height: 12px;
-    }
-  }
-}
-
-.ant-radio-disabled .ant-radio-inner {
-  border-color: @text-color-help-light !important;
-}
-
-.ant-checkbox {
-  &-inner {
-    border-color: @text-color-base;
-  }
-}
-
-.ant-checkbox-disabled .ant-checkbox-inner {
-  border-color: @text-color-help-light !important;
-}
-
-// select
-.ant-select {
-  &-selection {
-    border-color: @border-color-shallow-dark;
-  }
-
-  &-selection__placeholder,
-  &-search__field__placeholder {
-    color: @text-color-help-dark;
-  }
-}
-
-.ant-select-disabled .ant-select-arrow {
-  visibility: hidden;
-}
-
-.ant-select-dropdown {
-  min-width: 84px !important;
-
-  &.ant-select-dropdown--multiple {
-    .ant-select-dropdown-menu-item-selected .ant-select-selected-icon,
-    .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon {
-      color: @white;
-    }
-  }
-
-  &-menu-item {
-    height: 34px;
-    min-width: 84px;
-    line-height: 22px;
-    color: @text-color-call-out;
-
-    &:hover {
-      // color: @--norm-select-item-hover-color;
-      background: @tree-hover-background-color;
-    }
-
-    &-selected,
-    &-selected:hover {
-      color: @primary-color;
-      background: @tree-hover-background-color;
-    }
-
-    &-disabled,
-    &-disabled:hover {
-      color: @disabled-color;
-      background-color: @white;
-    }
-  }
-}
-
-.ant-select-disabled .ant-select-selection {
-  background: @tree-hover-font-color;
-}