refactor(Table): TD和TH组件从body、header中抽离,解决一个文件定义多个组件的eslint报错 (#342)

* feat(Table): 使用Rem规范修改Table组件样式命名 * refactor(Table): TD和TH组件从body、header中抽离,解决一个文件定义多个组件的eslint报错
DevCloudFE · Mar 26, 2022 · c2f1f6e · c2f1f6e
1 parent f6c2e44
commit c2f1f6e
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 90 deletions.
diff --git a/packages/devui-vue/devui/table/src/components/body-td/body-td.tsx b/packages/devui-vue/devui/table/src/components/body-td/body-td.tsx
@@ -0,0 +1,34 @@
+import { defineComponent, toRef } from 'vue';
+import type { PropType } from 'vue';
+import { Column } from '../column/column-types';
+import { useFixedColumn } from '../../composable/use-table';
+
+export default defineComponent({
+  name: 'DTableBodyTd',
+  props: {
+    column: {
+      type: Object as PropType<Column>,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup(props: { column: Column; row: any; index: number }) {
+    const column = toRef(props, 'column');
+
+    // 固定列
+    const { stickyCell, offsetStyle } = useFixedColumn(column);
+
+    return () => (
+      <td class={stickyCell.value} style={offsetStyle.value}>
+        {column.value.renderCell?.(props.row, props.index)}
+      </td>
+    );
+  },
+});
diff --git a/packages/devui-vue/devui/table/src/components/body/body.tsx b/packages/devui-vue/devui/table/src/components/body/body.tsx
@@ -1,8 +1,7 @@
-import { defineComponent, inject, computed, PropType, toRef } from 'vue';
+import { defineComponent, inject, computed } from 'vue';
 import { TABLE_TOKEN } from '../../table-types';
-import { Column } from '../column/column-types';
+import TD from '../body-td/body-td';
 import { Checkbox } from '../../../../checkbox';
-import { useFixedColumn } from '../../composable/use-table';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 import './body.scss';
 
@@ -12,19 +11,9 @@ export default defineComponent({
     const table = inject(TABLE_TOKEN);
     const { _data: data, _columns: columns, _checkList: checkList, isFixedLeft } = table.store.states;
     const ns = useNamespace('table');
-
-    // 移动到行上是否高亮
     const hoverEnabled = computed(() => table.props.rowHoveredHighlight);
 
-    // 行前的 checkbox
-    const tdAttrs = computed(() =>
-      isFixedLeft.value
-        ? {
-            class: `${ns.m('sticky-cell')} left`,
-            style: 'left:0;',
-          }
-        : null
-    );
+    const tdAttrs = computed(() => (isFixedLeft.value ? { class: `${ns.m('sticky-cell')} left`, style: 'left:0;' } : null));
     const renderCheckbox = (index: number) =>
       table.props.checkable ? (
         <td {...tdAttrs.value}>
@@ -48,29 +37,3 @@ export default defineComponent({
     );
   },
 });
-
-const TD = defineComponent({
-  props: {
-    column: {
-      type: Object as PropType<Column>,
-    },
-    row: {
-      type: Object,
-    },
-    index: {
-      type: Number,
-    },
-  },
-  setup(props: { column: Column; row: any; index: number }) {
-    const column = toRef(props, 'column');
-
-    // 固定列
-    const { stickyCell, offsetStyle } = useFixedColumn(column);
-
-    return () => (
-      <td class={stickyCell.value} style={offsetStyle.value}>
-        {column.value.renderCell(props.row, props.index)}
-      </td>
-    );
-  },
-});
diff --git a/packages/devui-vue/devui/table/src/components/header-th/header-th.tsx b/packages/devui-vue/devui/table/src/components/header-th/header-th.tsx
@@ -0,0 +1,37 @@
+import { defineComponent, inject, toRefs } from 'vue';
+import { PropType } from 'vue';
+import { Column } from '../column/column-types';
+import { TABLE_TOKEN } from '../../table-types';
+import { Sort } from '../sort';
+import { Filter } from '../filter';
+import { useFixedColumn } from '../../composable/use-table';
+import { useSort, useFilter } from './use-header-th';
+
+export default defineComponent({
+  name: 'DTableHeaderTh',
+  props: {
+    column: {
+      type: Object as PropType<Column>,
+      required: true,
+    },
+  },
+  setup(props: { column: Column }) {
+    const table = inject(TABLE_TOKEN);
+    const { column } = toRefs(props);
+    const directionRef = useSort(table.store, column);
+    const filteredRef = useFilter(table.store, column);
+    const { stickyCell, offsetStyle } = useFixedColumn(column);
+
+    return () => (
+      <th class={stickyCell.value} style={offsetStyle.value}>
+        <div class="header-container">
+          {props.column.renderHeader?.()}
+          {props.column.filterable && (
+            <Filter v-model={filteredRef.value} filterList={props.column.filterList} customTemplate={props.column.customFilterTemplate} />
+          )}
+        </div>
+        {props.column.sortable && <Sort v-model={directionRef.value} />}
+      </th>
+    );
+  },
+});
diff --git a/...table/src/components/header/use-header.ts → ...src/components/header-th/use-header-th.ts b/...table/src/components/header/use-header.ts → ...src/components/header-th/use-header-th.ts
@@ -19,7 +19,7 @@ export const useSort = (store: TableStore, column: Ref<Column>): Ref<SortDirecti
   return directionRef;
 };
 
-export const useFliter = (store: TableStore, column: Ref<Column>): Ref<FilterResults> => {
+export const useFilter = (store: TableStore, column: Ref<Column>): Ref<FilterResults> => {
   const filteredRef = shallowRef<FilterResults>();
   watch(filteredRef, (results) => {
     store.filterData(column.value.field, results);

diff --git a/packages/devui-vue/devui/table/src/components/header/header.tsx b/packages/devui-vue/devui/table/src/components/header/header.tsx
@@ -1,11 +1,7 @@
-import { defineComponent, inject, computed, PropType, toRefs } from 'vue';
+import { defineComponent, inject, computed } from 'vue';
 import { TABLE_TOKEN } from '../../table-types';
-import { Column } from '../column/column-types';
 import { Checkbox } from '../../../../checkbox';
-import { Sort } from '../sort';
-import { Filter } from '../filter';
-import { useFliter, useSort } from './use-header';
-import { useFixedColumn } from '../../composable/use-table';
+import TH from '../header-th/header-th';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 import './header.scss';
 import '../body/body.scss';
@@ -17,14 +13,7 @@ export default defineComponent({
     const { _checkAll: checkAll, _halfChecked: halfChecked, _columns: columns, isFixedLeft } = table.store.states;
     const ns = useNamespace('table');
 
-    const thAttrs = computed(() =>
-      isFixedLeft.value
-        ? {
-            class: `${ns.m('sticky-cell')} left`,
-            style: 'left:0;',
-          }
-        : null
-    );
+    const thAttrs = computed(() => (isFixedLeft.value ? { class: `${ns.m('sticky-cell')} left`, style: 'left:0;' } : null));
     const checkbox = computed(() =>
       table.props.checkable ? (
         <th {...thAttrs.value}>
@@ -39,45 +28,11 @@ export default defineComponent({
           <tr>
             {checkbox.value}
             {columns.value.map((column, index) => (
-              <Th key={index} column={column} />
+              <TH key={index} column={column} />
             ))}
           </tr>
         </thead>
       );
     };
   },
 });
-
-const Th = defineComponent({
-  props: {
-    column: {
-      type: Object as PropType<Column>,
-      required: true,
-    },
-  },
-  setup(props: { column: Column }) {
-    const table = inject(TABLE_TOKEN);
-    const { column } = toRefs(props);
-
-    // 排序功能
-    const directionRef = useSort(table.store, column);
-
-    // 过滤器
-    const filteredRef = useFliter(table.store, column);
-
-    // 固定列功能
-    const { stickyCell, offsetStyle } = useFixedColumn(column);
-
-    return () => (
-      <th class={stickyCell.value} style={offsetStyle.value}>
-        <div class="header-container">
-          {props.column.renderHeader()}
-          {props.column.filterable && (
-            <Filter v-model={filteredRef.value} filterList={props.column.filterList} customTemplate={props.column.customFilterTemplate} />
-          )}
-        </div>
-        {props.column.sortable && <Sort v-model={directionRef.value} />}
-      </th>
-    );
-  },
-});
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageContributorConfig.ts b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageContributorConfig.ts
@@ -486,6 +486,10 @@ export const CONTRIBUTORS_MAP: IContributingMap = {
       avatar: 'https://portrait.gitee.com/uploads/avatars/user/757/2273663_weban_1611113629.png!avatar200',
       homepage: 'https://gitee.com/weban'
     },
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/11143986?v=4',
+      homepage: 'https://github.com/xingyan95'
+    },
   ],
   tag: [
     {