feat: GiTable 表格组件插槽支持插槽类型提示(同步 GiDemo 更新)

This commit is contained in:
2024-10-27 20:01:05 +08:00
parent b46235b7ed
commit 88864d8c5d

View File

@@ -73,8 +73,16 @@
</a-row>
<div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
<div class="gi-table__container">
<a-table ref="tableRef" :stripe="stripe" :size="size" column-resizable :bordered="{ cell: isBordered }"
v-bind="{ ...attrs, columns: _columns }" :scrollbar="true">
<a-table
ref="tableRef"
:stripe="stripe"
:size="size"
column-resizable
:bordered="{ cell: isBordered }"
v-bind="{ ...attrs, columns: _columns }"
:scrollbar="true"
:data="data"
>
<template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
<slot :key="key" :name="key" v-bind="scoped"></slot>
</template>
@@ -84,13 +92,14 @@
</div>
</template>
<script setup lang="ts">
import type { DropdownInstance, TableColumnData, TableInstance } from '@arco-design/web-vue'
<script setup lang="ts" generic="T extends TableData">
import type { DropdownInstance, TableColumnData, TableData, TableInstance } from '@arco-design/web-vue'
import { VueDraggable } from 'vue-draggable-plus'
defineOptions({ name: 'GiTable', inheritAttrs: false })
const props = withDefaults(defineProps<Props>(), {
title: '',
data: () => [],
disabledTools: () => [], // 禁止显示的工具
disabledColumnKeys: () => [] // 禁止控制显示隐藏的列
})
@@ -99,11 +108,30 @@ const emit = defineEmits<{
(e: 'refresh'): void
}>()
defineSlots<{
'th': (props: { column: TableColumnData }) => void
'thead': () => void
'empty': (props: { column: TableColumnData }) => void
'summary-cell': (props: { column: TableColumnData, record: T, rowIndex: number }) => void
'pagination-right': () => void
'pagination-left': () => void
'td': (props: { column: TableColumnData, record: T, rowIndex: number }) => void
'tr': (props: { record: T, rowIndex: number }) => void
'tbody': () => void
'drag-handle-icon': () => void
'footer': () => void
'expand-row': (props: { record: T }) => void
'expand-icon': (props: { record: T, expanded?: boolean }) => void
'columns': () => void
[propsName: string]: (props: { key: string, record: T, column: TableColumnData, rowIndex: number }) => void
}>()
const attrs = useAttrs()
const slots = useSlots()
interface Props {
title?: string
data: T[]
disabledTools?: string[]
disabledColumnKeys?: string[]
}