Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix build problem in vue-vtable #2783

Merged
merged 1 commit into from
Nov 7, 2024
Merged

fix: fix build problem in vue-vtable #2783

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 31 additions & 22 deletions packages/vue-vtable/src/tables/base-table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<div ref="vTableContainer" :style="{ width: containerWidth, height: containerHeight }" style="position: relative"></div>
<div ref="vTableContainer"
:style="{ width: containerWidth, height: containerHeight }" style="position: relative" />
</template>

<script setup lang="ts">
Expand All @@ -12,7 +13,7 @@ import type { EventsProps } from '../eventsUtils';

// 定义表格实例和选项的类型
export type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;
export type IOption =
export type IOption =
| VTable.ListTableConstructorOptions
| VTable.PivotTableConstructorOptions
| VTable.PivotChartConstructorOptions;
Expand All @@ -31,7 +32,7 @@ export interface BaseTableProps extends EventsProps {
// 设置默认属性
const props = withDefaults(defineProps<BaseTableProps>(), {
width: '100%',
height: '100%',
height: '100%'
});

// 创建用于引用 DOM 元素和表格实例的 ref
Expand All @@ -56,20 +57,27 @@ const bindEvents = (instance: IVTable) => {
});
};

type Constructor<T> = new (dom: HTMLElement, options: IOption) => T;

// 创建表格实例
const createTableInstance = (Type: new (container: HTMLElement, options: IOption) => IVTable, options: IOption) => {
// use Constructor<T> will cause error in rollup-plugin-typescript2, use any temporarily
const createTableInstance = (Type: any, options: IOption) => {
vTableInstance.value = new Type(vTableContainer.value!, options);
};

const createVTable = () => {
if (!vTableContainer.value) return;
if (!vTableContainer.value) {
return;
}

if (vTableInstance.value) {
vTableInstance.value.release();
}

const getRecords = () => {
return props.records !== undefined && props.records !== null && props.records.length > 0 ? props.records : props.options.records;
return props.records !== undefined && props.records !== null && props.records.length > 0
? props.records
: props.options.records;
};

try {
Expand Down Expand Up @@ -103,7 +111,9 @@ const createVTable = () => {

// 更新表格实例
const updateVTable = (newOptions: IOption) => {
if (!vTableInstance.value) return;
if (!vTableInstance.value) {
return;
}

try {
switch (props.type) {
Expand Down Expand Up @@ -137,30 +147,29 @@ onBeforeUnmount(() => vTableInstance.value?.release());
// deep 选中会导致tree失效
watch(
() => props.options,
(newOptions) => {
if (vTableInstance.value) {
updateVTable(newOptions);
} else {
createVTable();
}
},
newOptions => {
if (vTableInstance.value) {
updateVTable(newOptions);
} else {
createVTable();
}
}
// { deep: true },
);

// 监听 records 属性的变化并更新表格
// 需要去做细颗粒度的比较
watch(
() => props.records,
(newRecords, oldRecords) => {
(newRecords, oldRecords) => {
// if (!isEqual(newRecords, oldRecords)) {
if (vTableInstance.value) {
updateVTable({ ...props.options, records: newRecords });
} else {
createVTable();
}
if (vTableInstance.value) {
updateVTable({ ...props.options, records: newRecords });
} else {
createVTable();
}
// }
},
{ deep: true },
{ deep: true }
);

</script>
Loading