FranklinWH-wiki/client/docs/.vitepress/theme/components/NormalTable.vue

<template>
  <n-data-table class="normal-table"
    :columns="columns as DataTableColumns"
    :data="tableData"
    :single-line="false"
  />
</template>

<script setup lang="ts">
import { h } from 'vue'
import { NDataTable, DataTableColumn, DataTableColumns, DataTableColumnGroup, DataTableBaseColumn, DataTableSelectionColumn, DataTableExpandColumn } from 'naive-ui'

interface ChildColumnConfig {
  title: string;
  key?: string;
  children?: ChildTableConfig;
  align?: 'left' | 'right' | 'center';      // 列文本对齐方式，默认left
  titleAlign?: 'left' | 'right' | 'center'; // 列标题对齐方式，默认同文本
  minWidth?: number | string;
  maxWidth?: number | string;
  width?: number | string;
  vertical?: boolean;   // 控制标题文件的显示方向为纵向
}

interface ColumnConfig extends ChildColumnConfig {
  // 类型选择，不填写默认为普通列
  // selection: 选项列，用于勾选数据行
  // expand: 可展开列，用于展开行
  type?: 'selection' | 'expand';

  // selection参数
  selectionMultiple?: boolean;  // 默认true，false-单选，true-多选
}

type ChildTableConfig = (string | ChildColumnConfig)[]
type TableConfig = (string | ColumnConfig)[]

// type TableRowData = Record<string, unknown>;
type TableRowData = CellDataType;
// type TableColumn = DataTableColumn<TableRowData>;
// type TableColumns = DataTableColumns<TableRowData>;
type TableBaseColumn = DataTableBaseColumn<TableRowData>;
// type TableColumnGroup = DataTableColumnGroup<TableRowData>;
type TableSelectionColumn = DataTableSelectionColumn<TableRowData>;
type TableExpandColumn = DataTableExpandColumn<TableRowData>;

// 规避naive-ui库bug，children类型定义错误
interface DataTableColumnGroupEx<T = TableRowData> extends Omit<DataTableColumnGroup<T>, 'children'> {
  children: ChildTableColumns
}
type DataTableColumnEx<T = TableRowData> = Exclude<DataTableColumn<T>, DataTableColumnGroup<T>> | DataTableColumnGroupEx<T>;
type TableColumnGroup = DataTableColumnGroupEx<TableRowData>;
type TableColumn = DataTableColumnEx<TableRowData>;
type TableColumns = Array<DataTableColumnEx<TableRowData>>;

type ChildTableColumn = DataTableBaseColumn<TableRowData> | DataTableColumnGroupEx<TableRowData>;
type ChildTableColumns = Array<(DataTableBaseColumn<TableRowData> | DataTableColumnGroupEx<TableRowData>)>;

interface CellDataExt {
  text: string;
  colspan?: number | undefined; // 向右合并 N 个单元格
  rowspan?: number | undefined; // 向下合并 N 个单元格
}

type CellDataType = {
  [title: string]: string | CellDataExt,
} & {
  // expand参数
  _expandable?: boolean;
  _expandString?: string;
}

interface Props {
  config?: TableConfig;
  data?: CellDataType[];
}

const props = withDefaults(defineProps<Props>(), {
  config: () => [],
  data: () => []
})

const handleRowSpan = (rowData: TableRowData, rowIndex: number, key: string): number => {
  const data = props.data[rowIndex]
  if (!data) return 1
  const keyValue = data[key]
  if (!keyValue) return 1
  if (typeof keyValue === "string") return 1
  return keyValue.rowspan ?? 1 
}

const handleColSpan = (rowData: TableRowData, rowIndex: number, key: string): number => {
  const data = props.data[rowIndex]
  if (!data) return 1
  const keyValue = data[key]
  if (!keyValue) return 1
  if (typeof keyValue === "string") return 1
  return keyValue.colspan ?? 1 
}

function createStringColumn(column: string, parentKey?: string): TableBaseColumn {
  const key = parentKey ? parentKey + `.${column}` : column
  const columnObj: TableBaseColumn = {
    title: column,
    key,
    rowSpan: (rowData, rowIndex) => {
      return handleRowSpan(rowData, rowIndex, key)
    },
    colSpan: (rowData, rowIndex) => {
      return handleColSpan(rowData, rowIndex, key)
    }
  }
  return columnObj
}

// 标题纵向渲染
const verticalTitle = (text: string) => () =>
  h('div', {
    style: {
      writingMode: 'vertical-rl',
      transform: 'rotate(180deg)',
      whiteSpace: 'nowrap',
      textAlign: 'center'
    }
  }, text)

function createBaseColumn(column: ChildColumnConfig, parentKey?: string): TableBaseColumn | TableColumnGroup {
  const columnKey = column.key ? column.key : column.title
  const key = parentKey ? parentKey + `.${columnKey}` : columnKey
  const title = column.vertical ? verticalTitle(column.title) : column.title
  const columnObj: TableBaseColumn | TableColumnGroup = {
    title,
    key,
    align: column.align,
    titleAlign: column.titleAlign,
    minWidth: column.minWidth,
    maxWidth: column.maxWidth,
    width: column.width,
    ...(() => {
      if (column.children === undefined) {
        return {
          rowSpan: (rowData, rowIndex) => {
            return handleRowSpan(rowData, rowIndex, key)
          },
          colSpan: (rowData, rowIndex) => {
            return handleColSpan(rowData, rowIndex, key)
          }
        }
      } else {
        const children = traversalChildren(column.children, key)
        return children ? { children } : {}
      }
    })()
  }
  return columnObj
}

function createSelectionColumn(column: ColumnConfig): TableSelectionColumn {
  const columnObj: TableSelectionColumn = {
    type: 'selection',
    multiple: column.selectionMultiple
  }
  return columnObj
}

function createExpandColumn(column: ColumnConfig): TableExpandColumn {
  const columnObj: TableExpandColumn = {
    type: 'expand',
    expandable: (rowData: TableRowData) => {
      return rowData._expandable ? rowData._expandable : false
    },
    renderExpand: (rowData: TableRowData, rowIndex: number) => {
      if (rowData._expandable === undefined || rowData._expandable === false) return undefined
      return rowData._expandString
    }
  }
  return columnObj
}

function traversalChildren(child: ChildTableConfig | undefined, parentKey?: string): ChildTableColumns | undefined {
  if (child === undefined) return undefined
  return child.map(item => {
    let obj: TableColumn | undefined = undefined
    if (typeof item === 'string') {
      obj = { ...createStringColumn(item, parentKey) }
    } else {
      obj = { ...createBaseColumn(item, parentKey) }
    }
    return obj
  }).filter(item => item !== undefined)
}

function createColumns(config: TableConfig): TableColumns {
  return config.map(column => {
    let obj: TableColumn | undefined = undefined
    if (typeof column === 'string') {
      obj = { ...createStringColumn(column) }
    } else if (column.type === 'selection') {
      obj = { ...createSelectionColumn(column) }
    } else if (column.type === 'expand') {
      obj = { ...createExpandColumn(column) }
    } else {
      obj = { ...createBaseColumn(column) }
    }
    return obj
  }).filter(item => item !== undefined)
}

function createData(data: CellDataType[]) {
  return data.map((row, index) => {
    let obj = {
      key: index
    }
    for (const key in row) {
      const value = row[key as keyof typeof row];
      if (typeof value === "string") {
        obj[key] = value
      } else {
        obj[key] = value.text
      }
    }
    return obj
  })
}

const columns = createColumns(props.config)
const tableData = createData(props.data)

</script>

<style scoped>
/* 覆盖.vp-doc table */
.normal-table :deep(table) {
  margin: 0 0 !important;
}

.normal-table :deep(td) {
  white-space: pre-wrap; /* 保留换行和空格 */
}
</style>