From ebf41e68fec3da865f40355e5b75c530402726be Mon Sep 17 00:00:00 2001 From: kagol Date: Thu, 23 Sep 2021 22:37:42 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E5=88=9D=E7=89=88=E8=A1=A8?= =?UTF-8?q?=E6=A0=BC=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/table/index.ts | 18 ++++++++++ devui/table/src/table-types.ts | 14 ++++++++ devui/table/src/table.scss | 3 ++ devui/table/src/table.tsx | 41 +++++++++++++++++++++++ docs/.vitepress/config/sidebar.ts | 2 +- docs/components/table/index.md | 55 +++++++++++++++++++++++++++++++ 6 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 devui/table/index.ts create mode 100644 devui/table/src/table-types.ts create mode 100644 devui/table/src/table.scss create mode 100644 devui/table/src/table.tsx create mode 100644 docs/components/table/index.md diff --git a/devui/table/index.ts b/devui/table/index.ts new file mode 100644 index 00000000..49876ef7 --- /dev/null +++ b/devui/table/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import Table from './src/table' + +Table.install = function(app: App): void { + app.component(Table.name, Table) +} + +export { Table } + +export default { + title: 'Table 表格', + category: '数据展示', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + + app.use(Table as any) + } +} diff --git a/devui/table/src/table-types.ts b/devui/table/src/table-types.ts new file mode 100644 index 00000000..1f9cbcf6 --- /dev/null +++ b/devui/table/src/table-types.ts @@ -0,0 +1,14 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +type TableData = Array<{ + [key: string]: any +}> + +export const tableProps = { + data: { + type: Array as PropType, + required: true, + } +} as const + +export type TableProps = ExtractPropTypes diff --git a/devui/table/src/table.scss b/devui/table/src/table.scss new file mode 100644 index 00000000..a8d0e661 --- /dev/null +++ b/devui/table/src/table.scss @@ -0,0 +1,3 @@ +.devui-table { + // +} diff --git a/devui/table/src/table.tsx b/devui/table/src/table.tsx new file mode 100644 index 00000000..8fe32b8d --- /dev/null +++ b/devui/table/src/table.tsx @@ -0,0 +1,41 @@ +import { defineComponent, toRefs } from 'vue' +import { tableProps, TableProps } from './table-types' +import './table.scss' + +export default defineComponent({ + name: 'DTable', + props: tableProps, + emits: [], + setup(props: TableProps) { + const { data } = toRefs(props) + + const renderTableHead = () => { + return Object.entries(data.value[0]).map(col => { col[0] }) + } + + const renderTableCell = (row) => { + return Object.entries(row).map(col => { col[1] }) + } + + const renderTableBody = () => { + return data.value.map(row => ( + { renderTableCell(row) } + )) + } + + return () => ( +
+ + + + { renderTableHead() } + + + + { renderTableBody() } + +
+
+ ) + }, +}) diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts index aca6bee6..e192e07e 100644 --- a/docs/.vitepress/config/sidebar.ts +++ b/docs/.vitepress/config/sidebar.ts @@ -77,7 +77,7 @@ const sidebar = { { text: 'Badge 徽标', link: '/components/badge/', status: '已完成' }, { text: 'Card 卡片', link: '/components/card/', status: '已完成' }, { text: 'Carousel 走马灯', link: '/components/carousel/', status: '已完成' }, - { text: 'DataTable 表格', link: '/components/data-table/' }, + { text: 'Table 表格', link: '/components/table/' }, { text: 'Gantt 甘特图', link: '/components/gantt/' }, { text: 'ImagePreview 图片预览', link: '/components/image-preview/' }, { text: 'Progress 进度条', link: '/components/progress/', status: '已完成' }, diff --git a/docs/components/table/index.md b/docs/components/table/index.md new file mode 100644 index 00000000..125813a2 --- /dev/null +++ b/docs/components/table/index.md @@ -0,0 +1,55 @@ +# Table 表格 + +### 基本用法 + +:::demo + +```vue + + + +``` + +::: + +### API + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :---------: | :------: | :-------: | :----------------------- | --------------------------------- | +| data | `TableProps` | '[]' | 必选，数据源 | | -- Gitee From 554698c0175edf7332398af781c57932d0a5234b Mon Sep 17 00:00:00 2001 From: kagol Date: Sun, 3 Oct 2021 22:09:15 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E7=89=88Table=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/table/__tests__/table.spec.ts | 8 + devui/table/index.ts | 19 ++ devui/table/src/body/body.scss | 20 ++ devui/table/src/body/body.tsx | 33 +++ devui/table/src/body/body.type.ts | 10 + devui/table/src/body/use-body.ts | 15 ++ devui/table/src/colgroup/colgroup.tsx | 23 ++ devui/table/src/column/column.tsx | 33 +++ devui/table/src/column/column.type.ts | 38 ++++ devui/table/src/column/use-column.ts | 45 ++++ devui/table/src/header/header.scss | 18 ++ devui/table/src/header/header.tsx | 22 ++ devui/table/src/header/header.type.ts | 10 + devui/table/src/store/index.ts | 30 +++ devui/table/src/table.scss | 26 +++ devui/table/src/table.tsx | 36 +++ devui/table/src/table.type.ts | 18 ++ devui/table/src/use-table.ts | 11 + devui/table/src/utils.ts | 11 + .../.vitepress/devui-theme/styles/layout.scss | 8 + docs/components/table/index.md | 210 ++++++++++++++++++ 21 files changed, 644 insertions(+) create mode 100644 devui/table/__tests__/table.spec.ts create mode 100644 devui/table/index.ts create mode 100644 devui/table/src/body/body.scss create mode 100644 devui/table/src/body/body.tsx create mode 100644 devui/table/src/body/body.type.ts create mode 100644 devui/table/src/body/use-body.ts create mode 100644 devui/table/src/colgroup/colgroup.tsx create mode 100644 devui/table/src/column/column.tsx create mode 100644 devui/table/src/column/column.type.ts create mode 100644 devui/table/src/column/use-column.ts create mode 100644 devui/table/src/header/header.scss create mode 100644 devui/table/src/header/header.tsx create mode 100644 devui/table/src/header/header.type.ts create mode 100644 devui/table/src/store/index.ts create mode 100644 devui/table/src/table.scss create mode 100644 devui/table/src/table.tsx create mode 100644 devui/table/src/table.type.ts create mode 100644 devui/table/src/use-table.ts create mode 100644 devui/table/src/utils.ts create mode 100644 docs/components/table/index.md diff --git a/devui/table/__tests__/table.spec.ts b/devui/table/__tests__/table.spec.ts new file mode 100644 index 00000000..35e37e75 --- /dev/null +++ b/devui/table/__tests__/table.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { Table } from '../index'; + +describe('table test', () => { + it('table init render', async () => { + // todo + }) +}) diff --git a/devui/table/index.ts b/devui/table/index.ts new file mode 100644 index 00000000..c40ee5ce --- /dev/null +++ b/devui/table/index.ts @@ -0,0 +1,19 @@ +import type { App } from 'vue' +import Table from './src/table' +import Column from './src/column/column' + +Table.install = function(app: App): void { + app.component(Table.name, Table) + app.component(Column.name, Column) +} + +export { Table, Column } + +export default { + title: 'Table 表格', + category: '数据展示', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(Table as any) + } +} diff --git a/devui/table/src/body/body.scss b/devui/table/src/body/body.scss new file mode 100644 index 00000000..64177992 --- /dev/null +++ b/devui/table/src/body/body.scss @@ -0,0 +1,20 @@ +@import '@devui/styles-var/devui-var.scss'; + +.devui-tbody { + tr { + font-size: $devui-font-size-card-title; + color: $devui-text; + border: none; + border-bottom: 1px solid $devui-dividing-line; + background-color: $devui-global-bg-normal; + + &:hover { + background-color: $devui-list-item-hover-bg; + } + + td { + padding: 10px; + border: none; + } + } +} diff --git a/devui/table/src/body/body.tsx b/devui/table/src/body/body.tsx new file mode 100644 index 00000000..a4104306 --- /dev/null +++ b/devui/table/src/body/body.tsx @@ -0,0 +1,33 @@ +import { defineComponent } from 'vue'; +import { TableBodyProps, TableBodyPropsTypes } from './body.type' +import { useTableBody } from './use-body'; +import './body.scss'; + +export default defineComponent({ + name: 'DTableBody', + props: TableBodyProps, + setup(props: TableBodyPropsTypes) { + const { rowColumns } = useTableBody(props); + + return { rowColumns }; + }, + render() { + const { rowColumns } = this; + + return ( + + {rowColumns.map((row) => { + return ( + + {row.columns.map((column, index) => { + return ( + {column.renderCell({ row, column, $index: index })} + ); + })} + + ); + })} + + ); + }, +}); \ No newline at end of file diff --git a/devui/table/src/body/body.type.ts b/devui/table/src/body/body.type.ts new file mode 100644 index 00000000..c1febde0 --- /dev/null +++ b/devui/table/src/body/body.type.ts @@ -0,0 +1,10 @@ +import { ExtractPropTypes } from 'vue'; + +export const TableBodyProps = { + store: { + type: Object, + default: {}, + }, +}; + +export type TableBodyPropsTypes = ExtractPropTypes; diff --git a/devui/table/src/body/use-body.ts b/devui/table/src/body/use-body.ts new file mode 100644 index 00000000..1657a06b --- /dev/null +++ b/devui/table/src/body/use-body.ts @@ -0,0 +1,15 @@ +import { computed } from 'vue'; +import { TableBodyPropsTypes } from './body.type' + +export function useTableBody(props: TableBodyPropsTypes): any { + const storeData = props.store.states; + const rowColumns = computed(() => { + return storeData._data.value.map((row) => { + const obj = Object.assign({}, row); + obj.columns = storeData._columns.value; + return obj; + }); + }); + + return { rowColumns }; +} \ No newline at end of file diff --git a/devui/table/src/colgroup/colgroup.tsx b/devui/table/src/colgroup/colgroup.tsx new file mode 100644 index 00000000..b5fb4779 --- /dev/null +++ b/devui/table/src/colgroup/colgroup.tsx @@ -0,0 +1,23 @@ +import { inject, defineComponent } from 'vue'; +import { Table } from '../table.type'; +import { Column } from '../column/column.type'; + +export default defineComponent({ + name: 'DColGroup', + setup() { + const parent: Table = inject('table'); + const columns: Column = parent.store.states._columns; + + return { columns }; + }, + render() { + const { columns } = this; + return ( + + {columns.map((column) => { + return ; + })} + + ); + }, +}); \ No newline at end of file diff --git a/devui/table/src/column/column.tsx b/devui/table/src/column/column.tsx new file mode 100644 index 00000000..60ef5e04 --- /dev/null +++ b/devui/table/src/column/column.tsx @@ -0,0 +1,33 @@ +import { inject, defineComponent, onBeforeMount, onMounted } from 'vue'; +import { + Column, + TableColumnProps, + TableColumnPropsTypes, +} from './column.type' +import { Table } from '../table.type'; +import { useRender } from './use-column'; + +export default defineComponent({ + name: 'DColumn', + props: TableColumnProps, + setup(props: TableColumnPropsTypes) { + const column: Column = { + field: props.field, + header: props.header, + }; + const parent: Table = inject('table'); + const { setColumnWidth, setColumnRender } = useRender(props); + + onBeforeMount(() => { + setColumnWidth(column); + setColumnRender(column); + }); + + onMounted(() => { + parent.store.insertColumn(column); + }); + }, + render() { + return null; + }, +}); \ No newline at end of file diff --git a/devui/table/src/column/column.type.ts b/devui/table/src/column/column.type.ts new file mode 100644 index 00000000..cdab0409 --- /dev/null +++ b/devui/table/src/column/column.type.ts @@ -0,0 +1,38 @@ +import { PropType, ExtractPropTypes, VNode } from 'vue'; + +export const TableColumnProps = { + header: { + type: String, + default: '', + }, + field: { + type: String, + default: '', + }, + width: { + type: [String, Number], + default: '', + }, + minWidth: { + type: [String, Number], + default: 80, + }, + formatter: { + type: Function as PropType< + (row: any, column: Column, cellValue, index: number) => VNode + >, + }, +}; + +export type TableColumnPropsTypes = ExtractPropTypes; + +export interface Column { + field?: string + width?: number + minWidth?: number + realWidth?: number + header?: string + renderHeader?: () => void + renderCell?: (data: any) => void + formatter?: (row: any, column: Column, cellValue, index: number) => VNode +} \ No newline at end of file diff --git a/devui/table/src/column/use-column.ts b/devui/table/src/column/use-column.ts new file mode 100644 index 00000000..7c5fc4ce --- /dev/null +++ b/devui/table/src/column/use-column.ts @@ -0,0 +1,45 @@ +import { ref } from 'vue'; +import { Column, TableColumnPropsTypes } from './column.type' +import { formatWidth, formatMinWidth } from '../utils'; + +export function useRender(props: TableColumnPropsTypes): any { + const formatedWidth = ref(formatWidth(props.width)); + const formatedMinWidth = ref(formatMinWidth(props.minWidth)); + const setColumnWidth = (column: Column) => { + column.width = formatedWidth.value; + column.minWidth = formatedMinWidth.value; + column.realWidth = column.width || column.minWidth; + return column; + }; + + const setColumnRender = (column: Column) => { + column.renderHeader = () => { + return defaultRenderHeader(column); + }; + column.renderCell = (data) => { + return defaultRenderCell(data); + }; + }; + + return { setColumnWidth, setColumnRender }; +} + +function defaultRenderHeader(column: Column) { + return column.header; +} + +function defaultRenderCell({ + row, + column, + $index, +}: { + row: any + column: Column + $index: number +}) { + const value = row[column.field]; + if (column.formatter) { + return column.formatter(row, column, value, $index); + } + return value?.toString?.() || ''; +} \ No newline at end of file diff --git a/devui/table/src/header/header.scss b/devui/table/src/header/header.scss new file mode 100644 index 00000000..b2886eee --- /dev/null +++ b/devui/table/src/header/header.scss @@ -0,0 +1,18 @@ +@import '@devui/styles-var/devui-var.scss'; + +.devui-thead { + tr { + font-size: $devui-font-size-card-title; + color: $devui-text; + font-weight: 700; + border: none; + border-bottom: 1px solid $devui-line; + background-color: $devui-global-bg-normal; + + th { + text-align: left; + padding: 12px 10px; + border: none; + } + } +} diff --git a/devui/table/src/header/header.tsx b/devui/table/src/header/header.tsx new file mode 100644 index 00000000..e6257666 --- /dev/null +++ b/devui/table/src/header/header.tsx @@ -0,0 +1,22 @@ +import { defineComponent, toRefs } from 'vue'; +import { TableHeaderProps, TableHeaderPropsTypes } from './header.type' +import './header.scss'; + +export default defineComponent({ + name: 'DTableHeader', + props: TableHeaderProps, + setup(props: TableHeaderPropsTypes) { + const { store } = toRefs(props) + const columns = store.value.states._columns.value; + + return ( + + + {columns.map((column) => { + return {column.renderHeader()}; + })} + + + ) + } +}); \ No newline at end of file diff --git a/devui/table/src/header/header.type.ts b/devui/table/src/header/header.type.ts new file mode 100644 index 00000000..3369aa9d --- /dev/null +++ b/devui/table/src/header/header.type.ts @@ -0,0 +1,10 @@ +import { ExtractPropTypes } from 'vue'; + +export const TableHeaderProps = { + store: { + type: Object, + default: {}, + }, +}; + +export type TableHeaderPropsTypes = ExtractPropTypes; diff --git a/devui/table/src/store/index.ts b/devui/table/src/store/index.ts new file mode 100644 index 00000000..b7138064 --- /dev/null +++ b/devui/table/src/store/index.ts @@ -0,0 +1,30 @@ +import { ref, watch } from 'vue'; +import { TablePropsTypes } from '../table.type'; +import { Column } from '../column/column.type'; + +export function createStore(props: TablePropsTypes): any { + const _data = ref([]); + const _columns = ref([]); + updateData(); + + watch(() => props.data, updateData, { deep: true }); + + function updateData() { + _data.value = []; + props.data.forEach((item) => { + _data.value.push(item); + }); + } + + const insertColumn = (column: Column) => { + _columns.value.push(column); + }; + + return { + insertColumn, + states: { + _data, + _columns, + }, + }; +} \ No newline at end of file diff --git a/devui/table/src/table.scss b/devui/table/src/table.scss new file mode 100644 index 00000000..9709244d --- /dev/null +++ b/devui/table/src/table.scss @@ -0,0 +1,26 @@ +@import '@devui/styles-var/devui-var.scss'; + +.devui-table { + display: table; + table-layout: fixed; + width: 100%; + border-spacing: 0; + border: none; + + &-wrapper { + width: 100%; + overflow-x: auto; + } + + &-striped { + tbody tr:nth-child(even) { + background-color: $devui-list-item-strip-bg; + } + } + + &-empty { + width: 100%; + font-size: $devui-font-size; + text-align: center; + } +} diff --git a/devui/table/src/table.tsx b/devui/table/src/table.tsx new file mode 100644 index 00000000..11e3bd80 --- /dev/null +++ b/devui/table/src/table.tsx @@ -0,0 +1,36 @@ +import { provide, defineComponent, getCurrentInstance } from 'vue'; +import { Table, TableProps, TablePropsTypes } from './table.type'; +import { useTable } from './use-table'; +import { createStore } from './store'; +import ColGroup from './colgroup/colgroup'; +import TableHeader from './header/header'; +import TableBody from './body/body'; +import './table.scss'; + +export default defineComponent({ + name: 'DTable', + props: TableProps, + setup(props: TablePropsTypes) { + const table = getCurrentInstance() as Table; + const store = createStore(props); + table.store = store; + const { classes } = useTable(props); + provide('table', table); + + return { classes, store }; + }, + render() { + const { classes, data, store, $slots } = this; + return ( +
+ {$slots.default()} + + + + {!!data.length && } +
+ {!data.length &&
No Data
} +
+ ); + }, +}); \ No newline at end of file diff --git a/devui/table/src/table.type.ts b/devui/table/src/table.type.ts new file mode 100644 index 00000000..563b9bb6 --- /dev/null +++ b/devui/table/src/table.type.ts @@ -0,0 +1,18 @@ +import { PropType, ExtractPropTypes, ComponentInternalInstance } from 'vue'; + +export const TableProps = { + data: { + type: Array as PropType, + default: [], + }, + striped: { + type: Boolean, + default: false, + }, +}; + +export type TablePropsTypes = ExtractPropTypes; + +export interface Table extends ComponentInternalInstance { + store: any +} diff --git a/devui/table/src/use-table.ts b/devui/table/src/use-table.ts new file mode 100644 index 00000000..c5e9f1e6 --- /dev/null +++ b/devui/table/src/use-table.ts @@ -0,0 +1,11 @@ +import { computed } from 'vue'; +import { TablePropsTypes } from './table.type'; + +export function useTable(props: TablePropsTypes): any { + const classes = computed(() => ({ + 'devui-table': true, + 'devui-table-striped': props.striped, + })); + + return { classes }; +} \ No newline at end of file diff --git a/devui/table/src/utils.ts b/devui/table/src/utils.ts new file mode 100644 index 00000000..9043fe1a --- /dev/null +++ b/devui/table/src/utils.ts @@ -0,0 +1,11 @@ +export function formatWidth(width: number | string): number { + if (typeof width === 'number') { + return width; + } + + return parseInt(width, 10) || 0; +} + +export function formatMinWidth(minWidth: number | string): number { + return formatWidth(minWidth) || 80; +} \ No newline at end of file diff --git a/docs/.vitepress/devui-theme/styles/layout.scss b/docs/.vitepress/devui-theme/styles/layout.scss index a25c86d6..8f0ef7a5 100644 --- a/docs/.vitepress/devui-theme/styles/layout.scss +++ b/docs/.vitepress/devui-theme/styles/layout.scss @@ -159,6 +159,14 @@ ol { padding-left: 1.25em; } +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + li > ul, li > ol { margin: 0; diff --git a/docs/components/table/index.md b/docs/components/table/index.md new file mode 100644 index 00000000..07cf4c49 --- /dev/null +++ b/docs/components/table/index.md @@ -0,0 +1,210 @@ +# Table 表格 + +展示行列数据。 + +### 何时使用 + +1. 当有大量结构化的数据需要展现时； +2. 当需要对数据进行排序、过滤、自定义操作等复杂行为时。 + +### 基本用法 + +:::demo 简单表格，`d-table`组件上的`data`属性传入要展示的数据，`d-table-column`组件上通过`field`传入对应列内容的字段名，`header`传入对应列的标题。 + +```vue + + + +``` + +::: + +### 斑马纹表格 + +:::demo 通过`d-table`组件上的`striped`属性，可设置带斑马纹的表格，更容易区分不同行的数据。 + +```vue + + + + + + +``` + +::: + +### 空数据模板 + +:::demo 当传入的数据为空时，默认展示空数据模板。 + +```vue + + + +``` + +::: + + +### d-table Props + +| 参数 | 类型 | 默认值 | 说明 | +| ------- | --------- | ------- | ------------------ | +| data | `Array` | `[]` | 显示的数据 | +| striped | `Boolean` | `false` | 是否显示斑马纹间隔 | + +### d-column Props + +| 参数 | 类型 | 默认值 | 说明 | +| ------ | ------------------ | ------ | ---------------------- | +| header | `String` | `-` | 对应列的标题 | +| field | `String` | `-` | 对应列内容的字段名 | +| width | `String \| Number` | `-` | 对应列的宽度，单位`px` | +| min-width | `String \| Number` | `-` | 对应列的最小宽度，单位`px` | -- Gitee From 52b026c881c353c8ebbe5933acaafc4ecb218ccd Mon Sep 17 00:00:00 2001 From: kagol Date: Sun, 3 Oct 2021 22:20:19 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B7=B1=E8=89=B2?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E4=B8=8Bdemo=E4=BB=A3=E7=A0=81=E5=9D=97?= =?UTF-8?q?=E7=9A=84=E9=A2=9C=E8=89=B2=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/devui-theme/styles/demo-block.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/.vitepress/devui-theme/styles/demo-block.scss b/docs/.vitepress/devui-theme/styles/demo-block.scss index 3c7b4b88..facd32f7 100644 --- a/docs/.vitepress/devui-theme/styles/demo-block.scss +++ b/docs/.vitepress/devui-theme/styles/demo-block.scss @@ -23,4 +23,11 @@ .meta { border-top: solid 1px $devui-dividing-line !important; + background-color: $devui-area !important; +} + +.description { + border: solid 1px $devui-dividing-line !important; + color: $devui-text !important; + background-color: $devui-base-bg !important; } -- Gitee From dbfd7434fe1bd0b970153d3e54c457bd034cdbd0 Mon Sep 17 00:00:00 2001 From: kagol Date: Sun, 3 Oct 2021 22:33:17 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4sidebar.ts?= =?UTF-8?q?=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/config/sidebar.ts | 214 ------------------------------ 1 file changed, 214 deletions(-) delete mode 100644 docs/.vitepress/config/sidebar.ts diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts deleted file mode 100644 index 3f3aab72..00000000 --- a/docs/.vitepress/config/sidebar.ts +++ /dev/null @@ -1,214 +0,0 @@ -export default { - '/': [ - { - "text": "快速开始", - "link": "/" - }, - { - "text": "通用", - "children": [ - { - "text": "Button 按钮", - "link": "/components/button/" - }, - { - "text": "Fullscreen 全屏", - "link": "/components/fullscreen/" - }, - { - "text": "Icon 图标", - "link": "/components/icon/" - }, - { - "text": "Overlay 遮罩层", - "link": "/components/overlay/" - }, - { - "text": "Panel 面板", - "link": "/components/panel/" - }, - { - "text": "Ripple 水波纹", - "link": "/components/ripple/" - }, - { - "text": "Search 搜索框", - "link": "/components/search/" - }, - { - "text": "Status 状态", - "link": "/components/status/" - }, - { - "text": "Sticky 便贴", - "link": "/components/sticky/" - } - ] - }, - { - "text": "导航", - "children": [ - { - "text": "Accordion 手风琴", - "link": "/components/accordion/" - }, - { - "text": "Anchor 锚点", - "link": "/components/anchor/" - }, - { - "text": "InputNumber 数字输入框", - "link": "/components/input-number/" - }, - { - "text": "Pagination 分页", - "link": "/components/pagination/", - "status": "已完成" - }, - { - "text": "StepsGuide 操作指引", - "link": "/components/steps-guide/", - "status": "开发中" - }, - { - "text": "Tabs 选项卡", - "link": "/components/tabs/" - } - ] - }, - { - "text": "反馈", - "children": [ - { - "text": "Alert 警告", - "link": "/components/alert/" - }, - { - "text": "Loading 加载提示", - "link": "/components/loading/", - "status": "已完成" - }, - { - "text": "Popover 悬浮提示", - "link": "/components/popover/", - "status": "开发中" - }, - { - "text": "Progress 进度条", - "link": "/components/progress/" - }, - { - "text": "Toast 全局提示", - "link": "/components/toast/" - }, - { - "text": "Tooltip提示", - "link": "/components/tooltip/" - } - ] - }, - { - "text": "数据录入", - "children": [ - { - "text": "Checkbox 复选框", - "link": "/components/checkbox/" - }, - { - "text": "DatePicker 日期选择器", - "link": "/components/date-picker/" - }, - { - "text": "EditableSelect 可输入下拉选择框", - "link": "/components/editable-select/" - }, - { - "text": "Input 输入框", - "link": "/components/input/" - }, - { - "text": "Radio 单选框", - "link": "/components/radio/" - }, - { - "text": "Rate 评分", - "link": "/components/rate/" - }, - { - "text": "Select 下拉框", - "link": "/components/select/" - }, - { - "text": "Slider 滑块", - "link": "/components/slider/" - }, - { - "text": "Switch 开关", - "link": "/components/switch/" - }, - { - "text": "TagInput 标签输入框", - "link": "/components/tag-input/" - }, - { - "text": "Transfer 穿梭框", - "link": "/components/transfer/" - }, - { - "text": "Upload 上传", - "link": "/components/upload/" - } - ] - }, - { - "text": "数据展示", - "children": [ - { - "text": "Avatar 头像", - "link": "/components/avatar/" - }, - { - "text": "Badge 徽标", - "link": "/components/badge/" - }, - { - "text": "Card 卡片", - "link": "/components/card/" - }, - { - "text": "Carousel 走马灯", - "link": "/components/carousel/" - }, - { - "text": "ImagePreview 图片预览", - "link": "/components/image-preview/" - }, - { - "text": "QuadrantDiagram 象限图", - "link": "/components/quadrant-diagram/" - }, - { - "text": "Skeleton 骨架屏", - "link": "/components/skeleton/" - }, - { - "text": "Table 表格", - "link": "/components/table/" - }, - { - "text": "Tree 树", - "link": "/components/tree/" - } - ] - }, - { - "text": "布局", - "children": [ - { - "text": "Splitter 分割器", - "link": "/components/splitter/" - } - ] - } - ] -} -- Gitee From b1657979d5eb7adb4b15d23edf316e8f668aa223 Mon Sep 17 00:00:00 2001 From: kagol Date: Tue, 5 Oct 2021 22:40:24 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=A3=80=E8=A7=86?= =?UTF-8?q?=E6=84=8F=E8=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/table/src/body/body.tsx | 6 +++--- devui/table/src/colgroup/colgroup.tsx | 6 +++--- devui/table/src/header/header.tsx | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/devui/table/src/body/body.tsx b/devui/table/src/body/body.tsx index a4104306..9b02b867 100644 --- a/devui/table/src/body/body.tsx +++ b/devui/table/src/body/body.tsx @@ -16,12 +16,12 @@ export default defineComponent({ return ( - {rowColumns.map((row) => { + {rowColumns.map((row, rowIndex) => { return ( - + {row.columns.map((column, index) => { return ( - {column.renderCell({ row, column, $index: index })} + {column.renderCell({ row, column, $index: index })} ); })} diff --git a/devui/table/src/colgroup/colgroup.tsx b/devui/table/src/colgroup/colgroup.tsx index b5fb4779..93e7197d 100644 --- a/devui/table/src/colgroup/colgroup.tsx +++ b/devui/table/src/colgroup/colgroup.tsx @@ -6,7 +6,7 @@ export default defineComponent({ name: 'DColGroup', setup() { const parent: Table = inject('table'); - const columns: Column = parent.store.states._columns; + const columns: Column[] = parent.store.states._columns; return { columns }; }, @@ -14,8 +14,8 @@ export default defineComponent({ const { columns } = this; return ( - {columns.map((column) => { - return ; + {columns.map((column, index) => { + return ; })} ); diff --git a/devui/table/src/header/header.tsx b/devui/table/src/header/header.tsx index e6257666..88c80013 100644 --- a/devui/table/src/header/header.tsx +++ b/devui/table/src/header/header.tsx @@ -12,8 +12,8 @@ export default defineComponent({ return ( - {columns.map((column) => { - return {column.renderHeader()}; + {columns.map((column, index) => { + return {column.renderHeader()}; })} -- Gitee