diff --git a/packages/devui-vue/devui/table/src/components/column/column-types.ts b/packages/devui-vue/devui/table/src/components/column/column-types.ts index e3ea4e71fd..b86a552d6f 100644 --- a/packages/devui-vue/devui/table/src/components/column/column-types.ts +++ b/packages/devui-vue/devui/table/src/components/column/column-types.ts @@ -3,7 +3,7 @@ import { DefaultRow } from '../../table-types'; import { TableStore } from '../../store/store-types'; // eslint-disable-next-line no-use-before-define -export type Formatter = (row: DefaultRow, column: Column, cellValue: any, rowIndex: number) => VNode[]; +export type Formatter = (row: DefaultRow, column: Column, cellValue: any, rowIndex: number) => VNode; export type CompareFn = (field: string, a: T, b: T) => boolean; diff --git a/packages/devui-vue/devui/table/src/components/column/config.tsx b/packages/devui-vue/devui/table/src/components/column/config.tsx index 04c2f4c8c9..251ec0ea2c 100644 --- a/packages/devui-vue/devui/table/src/components/column/config.tsx +++ b/packages/devui-vue/devui/table/src/components/column/config.tsx @@ -33,4 +33,16 @@ export const cellMap = { return rowIndex + 1; }, }, + default: { + renderHeader(column: Column): VNode { + return h('span', { class: 'title' }, column.header ?? ''); + }, + renderCell(rowData: DefaultRow, column: Column, store: TableStore, rowIndex: number): VNode { + const value = column.field ? rowData[column.field] : ''; + if (column.formatter) { + return column.formatter(rowData, column, value, rowIndex); + } + return value?.toString?.() ?? ''; + }, + }, }; diff --git a/packages/devui-vue/devui/table/src/components/column/use-column.ts b/packages/devui-vue/devui/table/src/components/column/use-column.ts index ac7e5f62bc..49b209ed0d 100644 --- a/packages/devui-vue/devui/table/src/components/column/use-column.ts +++ b/packages/devui-vue/devui/table/src/components/column/use-column.ts @@ -6,7 +6,7 @@ import { TableStore } from '../../store/store-types'; import { formatWidth, formatMinWidth } from '../../utils'; import { cellMap } from './config'; -export function createColumn(props: ToRefs, templates: Slots): Column { +export function createColumn(props: ToRefs, slots: Slots): Column { const { type, field, @@ -26,20 +26,18 @@ export function createColumn(props: ToRefs, templates: Slots): const column: Column = reactive({}); column.type = type.value; - function defaultRenderHeader(columnItem: Column) { - return h('span', { class: 'title' }, columnItem.header ?? ''); + function renderHeader(columnItem: Column, store: TableStore) { + if (slots.header) { + return slots.header(columnItem); + } + return cellMap[type.value || 'default'].renderHeader(columnItem, store); } - function defaultRenderCell(rowData: DefaultRow, columnItem: Column, store: TableStore, rowIndex: number) { - const value = columnItem.field ? rowData[columnItem.field] : ''; - if (templates.default) { - return templates.default(rowData); - } - if (columnItem.formatter) { - return columnItem.formatter(rowData, columnItem, value, rowIndex); + function renderCell(rowData: DefaultRow, columnItem: Column, store: TableStore, rowIndex: number) { + if (slots.default) { + return slots.default({ row: rowData, rowIndex }); } - - return value?.toString?.() ?? ''; + return cellMap[type.value || 'default'].renderCell(rowData, columnItem, store, rowIndex); } watch( @@ -88,11 +86,11 @@ export function createColumn(props: ToRefs, templates: Slots): // 基础渲染功能 onBeforeMount(() => { - column.renderHeader = type.value ? cellMap[type.value].renderHeader : defaultRenderHeader; - column.renderCell = type.value ? cellMap[type.value].renderCell : defaultRenderCell; + column.renderHeader = renderHeader; + column.renderCell = renderCell; column.formatter = formatter?.value; - column.customFilterTemplate = templates.customFilterTemplate; - column.subColumns = templates.subColumns; + column.customFilterTemplate = slots.customFilterTemplate; + column.subColumns = slots.subColumns; }); return column; diff --git a/packages/devui-vue/docs/components/table/index.md b/packages/devui-vue/docs/components/table/index.md index 9ea0a78b90..222e058fa0 100644 --- a/packages/devui-vue/docs/components/table/index.md +++ b/packages/devui-vue/docs/components/table/index.md @@ -2,28 +2,22 @@ 展示行列数据。 -### 何时使用 +#### 何时使用 1. 当有大量结构化的数据需要展现时； 2. 当需要对数据进行排序、过滤、自定义操作等复杂行为时。 ### 基本用法 -:::demo 简单表格，`d-table`组件上的`data`属性传入要展示的数据，`d-table-column`组件上通过`field`传入对应列内容的字段名，`header`传入对应列的标题。 +:::demo 简单表格，`d-table`组件上的`data`属性传入要展示的数据，`d-column`组件上通过`field`传入对应列内容的字段名，`header`传入对应列的标题。 ```vue @@ -58,11 +52,8 @@ export default defineComponent({ date: '1990/01/14', }, ]); - const handleClick = (scope) => { - console.log(scope); - }; - return { baseTableData, handleClick }; + return { baseTableData }; }, }); @@ -278,6 +269,195 @@ export default defineComponent({ ::: +### 索引列 + +:::demo 通过添加一个`d-column`并且设置`type`参数为`index`即可给表格添加索引。索引列的表头默认展示`#`，可通过`header`参数传入指定内容。 + +```vue + + + +``` + +::: + +### 自定义列 + +:::demo 通过`d-column`子组件提供的`default`插槽可以实现自定义列，插槽提供`row`和`rowIndex`两个参数，分别代表行数据和行索引值。 + +```vue + + + +``` + +::: + +### 自定义表头 + +:::demo 通过`d-column`子组件提供的`header`插槽可以实现自定义表头。 + +```vue + + + +``` + +::: + ### 空数据模板 :::demo 当传入的数据为空时，默认展示空数据模板。 @@ -586,9 +766,10 @@ export default defineComponent({ ### d-column 插槽 -| 插槽名 | 说明 | -| :------ | :--------------------- | -| default | 默认插槽，自定义列内容 | +| 插槽名 | 说明 | +| :------ | :----------------------- | +| default | 默认插槽，自定义列内容 | +| header | 表头插槽，自定义表头内容 | ### 类型定义