feat(Table): 表格支持索引列 (DevCloudFE#387)

Author: xingyan95

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

@@ -7,7 +7,7 @@ export type Formatter = (row: DefaultRow, column: Column, cellValue: any, rowInd
 
 export type CompareFn<T = any> = (field: string, a: T, b: T) => boolean;
 
-export type ColumnType = 'checkable' | '';
+export type ColumnType = 'checkable' | 'index' | '';
 
 export interface FilterConfig {
  id: number | string;
@@ -23,7 +23,6 @@ export const tableColumnProps = {
  },
  header: {
  type: String,
- default: '',
  },
  field: {
  type: String,

packages/devui-vue/devui/table/src/components/column/config.tsx

@@ -25,4 +25,12 @@ export const cellMap = {
  });
  },
  },
+ index: {
+ renderHeader(column: Column): VNode {
+ return h('span', { class: 'title' }, column.header ?? '#');
+ },
+ renderCell(rowData: DefaultRow, column: Column, store: TableStore, rowIndex: number): number {
+ return rowIndex + 1;
+ },
+ },
 };

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

@@ -27,7 +27,7 @@ export function createColumn(props: ToRefs<TableColumnProps>, templates: Slots):
  column.type = type.value;
 
  function defaultRenderHeader(columnItem: Column) {
- return h('span', { class: 'title' }, columnItem.header);
+ return h('span', { class: 'title' }, columnItem.header ?? '');
  }
 
  function defaultRenderCell(rowData: DefaultRow, columnItem: Column, store: TableStore, rowIndex: number) {

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

@@ -14,6 +14,7 @@
 ```vue
 <template>
  <d-table :data="baseTableData">
+ <d-column type="index"></d-column>
  <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>