kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: Table重构中

This commit is contained in:
kailong321200875 2023-06-28 17:37:04 +08:00
parent 6e002b4591
commit 0a273ff8c8
2 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Table/src/Table.vue
View File

@ -22,7 +22,7 @@ export default defineComponent({
default: () => [] default: () => []
}, },
// 展开行 // 展开行
expand: propTypes.bool.def(false), // expand: propTypes.bool.def(false),
// 是否展示分页 // 是否展示分页
pagination: { pagination: {
type: Object as PropType<Pagination>, type: Object as PropType<Pagination>,
@ -168,23 +168,23 @@ export default defineComponent({
) : undefined ) : undefined
} }
const renderTableExpand = () => { // const renderTableExpand = () => {
const { align, headerAlign, expand } = unref(getProps) // const { align, headerAlign, expand } = unref(getProps)
// 渲染展开行 // // 渲染展开行
return expand ? ( // return expand ? (
<ElTableColumn type="expand" align={align} headerAlign={headerAlign}> // <ElTableColumn type="expand" align={align} headerAlign={headerAlign}>
{{ // {{
// @ts-ignore // // @ts-ignore
default: (data: TableSlotDefault) => getSlot(slots, 'expand', data) // default: (data: TableSlotDefault) => getSlot(slots, 'expand', data)
}} // }}
</ElTableColumn> // </ElTableColumn>
) : undefined // ) : undefined
} // }
const renderTreeTableColumn = (columnsChildren: TableColumn[]) => { const renderTreeTableColumn = (columnsChildren: TableColumn[]) => {
const { align, headerAlign, showOverflowTooltip } = unref(getProps) const { align, headerAlign, showOverflowTooltip } = unref(getProps)
return columnsChildren.map((v) => { return columnsChildren.map((v) => {
const props = { ...v } const props = { ...v } as any
if (props.children) delete props.children if (props.children) delete props.children
return ( return (
<ElTableColumn <ElTableColumn
@ -220,7 +220,7 @@ export default defineComponent({
headerAlign, headerAlign,
showOverflowTooltip showOverflowTooltip
} = unref(getProps) } = unref(getProps)
return [...[renderTableExpand()], ...[renderTableSelection()]].concat( return [renderTableSelection()].concat(
(columnsChildren || columns).map((v) => { (columnsChildren || columns).map((v) => {
// 自定生成序号 // 自定生成序号
if (v.type === 'index') { if (v.type === 'index') {
@ -239,7 +239,7 @@ export default defineComponent({
></ElTableColumn> ></ElTableColumn>
) )
} else { } else {
const props = { ...v } const props = { ...v } as any
if (props.children) delete props.children if (props.children) delete props.children
return ( return (
<ElTableColumn <ElTableColumn

28
src/components/Table/src/types/index.ts
View File

@ -2,6 +2,34 @@ export interface TableColumn {
field: string field: string
label?: string label?: string
children?: TableColumn[] children?: TableColumn[]
slots?: {
defalut?: (...args: any[]) => JSX.Element | null
header?: (...args: any[]) => JSX.Element | null
}
index?: number | ((index: number) => number)
columnKey?: string
width?: string | number
minWidth?: string | number
fixed?: boolean | 'left' | 'right'
renderHeader?: (...args: any[]) => JSX.Element | null
sortable?: boolean | 'custom'
sortMethod?: (...args: any[]) => number
sortBy?: string | string[] | ((...args: any[]) => string | string[])
sortOrders?: (string | null)[]
resizable?: boolean
formatter?: (...args: any[]) => any
showOverflowTooltip?: boolean
align?: 'left' | 'center' | 'right'
headerAlign?: 'left' | 'center' | 'right'
className?: string
labelClassName?: string
selectable?: (...args: any[]) => boolean
reserveSelection?: boolean
filters?: Array<{ text: string; value: string }>
filterPlacement?: string
filterMultiple?: boolean
filterMethod?: (...args: any[]) => boolean
filteredValue?: string[]
[key: string]: any [key: string]: any
} }