| 提交 | 用户 | age | ||
| 6753e2 | 1 | import { defineComponent } from 'vue'; |
| L | 2 | import { computed, ref } from 'vue'; |
| 3 | import { BasicTableProps } from './types'; | |
| 4 | import { basicProps } from './props'; | |
| 5 | import { ignorePropKeys } from './const'; | |
| 6 | import { basicEmits } from './emits'; | |
| 7 | import XEUtils from 'xe-utils'; | |
| 8 | import type { VxeGridInstance, VxeGridEventProps, GridMethods, TableMethods } from 'vxe-table'; | |
| 9 | import { Grid as VxeGrid } from 'vxe-table'; | |
| 10 | ||
| 11 | import { extendSlots } from '/@/utils/helper/tsxHelper'; | |
| 12 | import { gridComponentMethodKeys } from './methods'; | |
| 816fff | 13 | import { omit } from 'lodash-es'; |
| 6753e2 | 14 | |
| L | 15 | export default defineComponent({ |
| 16 | name: 'VxeBasicTable', | |
| 17 | props: basicProps, | |
| 18 | emits: basicEmits, | |
| 19 | setup(props, { emit, attrs }) { | |
| 20 | const tableElRef = ref<VxeGridInstance>(); | |
| 21 | const emitEvents: VxeGridEventProps = {}; | |
| 22 | ||
| 23 | const extendTableMethods = (methodKeys) => { | |
| 24 | const funcs: any = {}; | |
| 25 | methodKeys.forEach((name) => { | |
| 26 | funcs[name] = (...args: any[]) => { | |
| 27 | const $vxegrid: any = tableElRef.value; | |
| 28 | if ($vxegrid && $vxegrid[name]) { | |
| 29 | return $vxegrid[name](...args); | |
| 30 | } | |
| 31 | }; | |
| 32 | }); | |
| 33 | ||
| 34 | return funcs; | |
| 35 | }; | |
| 36 | ||
| 37 | const gridExtendTableMethods = extendTableMethods(gridComponentMethodKeys) as GridMethods & | |
| 38 | TableMethods; | |
| 39 | ||
| 40 | basicEmits.forEach((name) => { | |
| 41 | const type = XEUtils.camelCase(`on-${name}`) as keyof VxeGridEventProps; | |
| 42 | ||
| 43 | emitEvents[type] = (...args: any[]) => emit(name, ...args); | |
| 44 | }); | |
| 45 | ||
| 46 | /** | |
| 47 | * @description: 二次封装需要的所有属性 | |
| 48 | * 1.部分属性需要和全局属性进行合并 | |
| 49 | */ | |
| 50 | const getBindValues = computed<BasicTableProps>(() => { | |
| 51 | const propsData: BasicTableProps = { | |
| 52 | ...attrs, | |
| 53 | ...props, | |
| 54 | }; | |
| 55 | ||
| 56 | return propsData; | |
| 57 | }); | |
| 58 | ||
| 59 | /** | |
| 60 | * @description: Table 所有属性 | |
| 61 | */ | |
| 62 | const getBindGridValues = computed(() => { | |
| 63 | const omitProps = omit(getBindValues.value, ignorePropKeys); | |
| 64 | ||
| 65 | return { | |
| 66 | ...omitProps, | |
| 67 | ...getBindGridEvent, | |
| 68 | }; | |
| 69 | }); | |
| 70 | ||
| 71 | /** | |
| 72 | * @description: 组件外层class | |
| 73 | */ | |
| 74 | const getWrapperClass = computed(() => { | |
| 75 | return [attrs.class]; | |
| 76 | }); | |
| 77 | ||
| 78 | /** | |
| 79 | * @description: 重写Vxe-table 方法 | |
| 80 | */ | |
| 81 | const getBindGridEvent: VxeGridEventProps = { | |
| 82 | ...emitEvents, | |
| 83 | }; | |
| 84 | ||
| 85 | return { | |
| 86 | getWrapperClass, | |
| 87 | getBindGridValues, | |
| 88 | tableElRef, | |
| 89 | ...gridExtendTableMethods, | |
| 90 | }; | |
| 91 | }, | |
| 92 | render() { | |
| 93 | const { tableClass, tableStyle } = this.$props; | |
| 94 | ||
| 95 | return ( | |
| 96 | <div class={`h-full flex flex-col bg-white ${this.getWrapperClass}`}> | |
| 97 | <VxeGrid | |
| 98 | ref="tableElRef" | |
| 99 | class={`vxe-grid_scrollbar px-6 py-4 ${tableClass}`} | |
| 100 | style={tableStyle} | |
| 101 | {...this.getBindGridValues} | |
| 102 | > | |
| 103 | {extendSlots(this.$slots)} | |
| 104 | </VxeGrid> | |
| 105 | </div> | |
| 106 | ); | |
| 107 | }, | |
| 108 | }); | |
