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