import { ConfigProvider } from '@arco-design/web-vue'
|
import {
|
defineComponent,
|
DefineComponent,
|
PropType,
|
reactive,
|
defineProps,
|
inject,
|
SetupContext,
|
computed,
|
onMounted,
|
} from 'vue'
|
import { TablePropsItemType } from './BaseTable.d'
|
import { useVModels } from '@vueuse/core'
|
import { tableEmits, tableProps } from './Props'
|
import { _t, getScopeT, globalT } from '@/libs/Language/Language'
|
import { useUtils } from './useUtils'
|
import styles from './BaseTable.module.scss'
|
import { ColumnSlots } from './useColumns'
|
import { useEvent } from './useEvent'
|
import { createState } from './useState'
|
import { useHook } from './useHook'
|
import { debounce } from 'lodash'
|
|
const PropsDefineWrapper = {
|
...tableProps,
|
...tableEmits,
|
} as const
|
const emits = Object.keys(tableEmits).map((eventName: string) => {
|
const name = eventName.split('on')?.[1]
|
return name.replace(name[0], name[0].toLowerCase())
|
})
|
type BaseTablePropsDefine = DefineComponent<typeof PropsDefineWrapper>
|
|
const BaseTable: BaseTablePropsDefine = defineComponent({
|
name: 'BaseTable',
|
props: tableProps,
|
emits,
|
setup(props, ctx: SetupContext) {
|
const { columns, columnSeq, dataSource, rowId, baseTableRef } = createState(
|
props,
|
ctx
|
)
|
const events = useEvent(props, ctx)
|
const { getRowClassName, getTableStyle, autoHeight } = useHook(props, ctx)
|
const slots = ColumnSlots(props, columns)
|
const slotMap = {
|
...columnSeq.value,
|
...slots,
|
empty: () => {
|
return <div class={styles.nullData}>{_t('暂无数据')}</div>
|
},
|
}
|
return () => {
|
const style = getTableStyle()
|
|
return (
|
<div class={styles.baseTable} style={style} ref={baseTableRef}>
|
<a-table
|
{...props}
|
columns={columns.value}
|
data={dataSource.value}
|
rowKey={rowId.value}
|
bordered={{ wrapper: true, cell: true }}
|
pagination={!props.isHidePagination}
|
v-slots={slotMap}
|
row-class={getRowClassName}
|
columnResizable={props.columnResizable}
|
headerCellClass="selector-ignore"
|
scroll={{ x: props.width, y: autoHeight.value }}
|
virtual-list-props={
|
props.isVScroll ? { height: '100%' } : undefined
|
}
|
{...events}
|
></a-table>
|
</div>
|
)
|
}
|
},
|
})
|
export default BaseTable
|
