feat(Table): 完成Table组件合并单元格功能 (DevCloudFE#347)

* feat(Table): 使用Rem规范修改Table组件样式命名 * refactor(Table): TD和TH组件从body、header中抽离,解决一个文件定义多个组件的eslint报错 * feat(Table): 完成Table组件合并单元格功能 * feat(Table): 修改函数命名

Author: xingyan95

packages/devui-vue/devui/table/src/components/body/body.tsx

@@ -3,6 +3,7 @@ import { TABLE_TOKEN } from '../../table-types';
 import TD from '../body-td/body-td';
 import { Checkbox } from '../../../../checkbox';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import { useMergeCell } from './use-body';
 import './body.scss';
 
 export default defineComponent({
@@ -12,8 +13,9 @@ export default defineComponent({
  const { _data: data, _columns: columns, _checkList: checkList, isFixedLeft } = table.store.states;
  const ns = useNamespace('table');
  const hoverEnabled = computed(() => table.props.rowHoveredHighlight);
-
+ const { tableSpans, removeCells } = useMergeCell();
  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}>
@@ -27,9 +29,15 @@ export default defineComponent({
  return (
  <tr key={rowIndex} class={{ 'hover-enabled': hoverEnabled.value }}>
  {renderCheckbox(rowIndex)}
- {columns.value.map((column, index) => (
- <TD column={column} index={index} row={row} />
- ))}
+ {columns.value.map((column, columnIndex) => {
+ const cellId = `${rowIndex}-${columnIndex}`;
+ const [rowspan, colspan] = tableSpans.value[cellId] ?? [1, 1];
+
+ if (removeCells.value.includes(cellId)) {
+ return null;
+ }
+ return <TD column={column} index={columnIndex} row={row} rowspan={rowspan} colspan={colspan} />;
+ })}
  </tr>
  );
  })}

packages/devui-vue/devui/table/src/components/body/use-body.ts

@@ -1,7 +1,64 @@
-import { computed, ComputedRef } from 'vue';
-import { Column } from '../column/column-types';
-import { TableBodyPropsTypes } from './body-types';
+import { inject, computed } from 'vue';
+import { TABLE_TOKEN } from '../../table-types';
 
-interface Data {
- rowColumns: ComputedRef<(Record<string, any> & { columns: Column[] })[]>;
+export function useMergeCell() {
+ const table = inject(TABLE_TOKEN);
+ const { _data: data, _columns: columns } = table.store.states;
+
+ const getSpan = (row: any, column: any, rowIndex: number, columnIndex: number) => {
+ const fn = table?.props.spanMethod;
+ let rowspan = 1;
+ let colspan = 1;
+
+ if (typeof fn === 'function') {
+ const result = fn({ row, column, rowIndex, columnIndex });
+
+ if (Array.isArray(result)) {
+ rowspan = result[0];
+ colspan = result[1];
+ } else if (typeof result === 'object') {
+ rowspan = result.rowspan;
+ colspan = result.colspan;
+ }
+ }
+
+ return { rowspan, colspan };
+ };
+
+ const tableSpans = computed(() => {
+ const result: Record<string, [number, number]> = {};
+
+ if (table?.props.spanMethod) {
+ data.value.forEach((row, rowIndex) => {
+ columns.value.forEach((column, columnIndex) => {
+ const { rowspan, colspan } = getSpan(row, column, rowIndex, columnIndex);
+ if (rowspan > 1 || colspan > 1) {
+ result[`${rowIndex}-${columnIndex}`] = [rowspan, colspan];
+ }
+ });
+ });
+ }
+
+ return result;
+ });
+
+ const removeCells = computed(() => {
+ const result: string[] = [];
+ for (const indexKey of Object.keys(tableSpans.value)) {
+ const indexArray = indexKey.split('-').map((item) => Number(item));
+ const spans = tableSpans.value[indexKey];
+ for (let i = 1; i < spans[0]; i++) {
+ result.push(`${indexArray[0] + i}-${indexArray[1]}`);
+ for (let j = 1; j < spans[1]; j++) {
+ result.push(`${indexArray[0] + i}-${indexArray[1] + j}`);
+ }
+ }
+ for (let i = 1; i < spans[1]; i++) {
+ result.push(`${indexArray[0]}-${indexArray[1] + i}`);
+ }
+ }
+ return result;
+ });
+
+ return { tableSpans, removeCells };
 }

packages/devui-vue/devui/table/src/table-types.ts

@@ -3,6 +3,13 @@ import { TableStore } from './store';
 
 export type TableSize = 'sm' | 'md' | 'lg';
 
+export type SpanMethod = (data: {
+ row: any;
+ column: any;
+ rowIndex: number;
+ columnIndex: number;
+}) => number[] | { rowspan: number; colspan: number };
+
 export const TableProps = {
  data: {
  type: Array as PropType<Record<string, any>[]>,
@@ -61,6 +68,9 @@ export const TableProps = {
  type: Boolean,
  default: false,
  },
+ spanMethod: {
+ type: Function as PropType<SpanMethod>,
+ },
 };
 
 export type TablePropsTypes = ExtractPropTypes<typeof TableProps>;

packages/devui-vue/docs/components/table/index.md

@@ -302,6 +302,71 @@ export default defineComponent({
 
 :::
 
+### 合并单元格
+
+:::demo 通过`span-method`方法可以自定义合并单元格，方法参数是一个对象，对象包含属性如下：当前行`row`、当前列`column`、当前行索引`rowIndex`、当前列索引`columnIndex`。该方法可以返回包含两个元素的数组，第一个元素是`rowspan`，第二个元素是`colspan`；也可以返回一个对象，属性为`rowspan`和`colspan`。
+
+```vue
+<template>
+ <d-table :data="baseTableData" :span-method="spanMethod">
+ <d-column field="firstName" header="First Name"></d-column>
+ <d-column field="lastName" header="Last Name"></d-column>
+ <d-column field="gender" header="Gender"></d-column>
+ <d-column field="date" header="Date of birth"></d-column>
+ </d-table>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+ setup() {
+ const baseTableData = ref([
+ {
+ firstName: 'Mark',
+ lastName: 'Otto',
+ date: '1990/01/11',
+ gender: 'Male',
+ },
+ {
+ firstName: 'Jacob',
+ lastName: 'Thornton',
+ gender: 'Female',
+ date: '1990/01/12',
+ },
+ {
+ firstName: 'Danni',
+ lastName: 'Chen',
+ gender: 'Male',
+ date: '1990/01/13',
+ },
+ {
+ firstName: 'green',
+ lastName: 'gerong',
+ gender: 'Male',
+ date: '1990/01/14',
+ },
+ ]);
+ const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
+ if (rowIndex === 0 && columnIndex === 0) {
+ return { rowspan: 1, colspan: 2 };
+ }
+ if (rowIndex === 2 && columnIndex === 0) {
+ return [2, 2];
+ }
+ if (rowIndex === 2 && columnIndex === 3) {
+ return [2, 1];
+ }
+ };
+
+ return { baseTableData, spanMethod };
+ },
+});
+</script>
+```
+
+:::
+
 ### d-table 参数
 
 | 参数 | 类型 | 默认值 | 说明 |
@@ -318,6 +383,7 @@ export default defineComponent({
 | show-loading | `Boolean` | false | 显示加载动画 |
 | header-bg | `Boolean` | false | 头部背景 |
 | table-layout | `'fixed' \| 'auto'` | 'fixed' | 表格布局，可选值为'auto' |
+| span-method | `SpanMethod` | -- | 合并单元格的计算方法 |
 
 ### d-column 参数
 
@@ -336,3 +402,16 @@ export default defineComponent({
 | 名称 | 说明 |
 | :------ | :--------------------- |
 | default | 默认插槽，自定义列内容 |
+
+### 类型定义
+
+#### SpanMethod
+
+```typescript
+type SpanMethod = (data: {
+ row: any;
+ column: any;
+ rowIndex: number;
+ columnIndex: number;
+}) => number[] | { rowspan: number; colspan: number };
+```