JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-11-29 22:12:11 +08:00
Code Issues Projects Releases Wiki Activity

fix(form): table拖拽排序后重新渲染组件

Browse Source
This commit is contained in:
roymondchen 2025-11-26 16:40:26 +08:00
parent b536eba81c
commit 2667981e4c
3 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/form/src/table/Table.vue
View File

@ -133,16 +133,15 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
);
const { nextZIndex } = useZIndex();
const updateKey = ref(1);
const { addable, newHandler } = useAdd(props, emit);
const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
useSortable(props, emit, tMagicTableRef, modelName);
useSortable(props, emit, tMagicTableRef, modelName, updateKey);
const { isFullscreen, toggleFullscreen } = useFullscreen();
const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
const updateKey = ref(1);
const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value]));
const toggleMode = () => {

10
packages/form/src/table/useSortable.ts
View File

@ -1,4 +1,4 @@
import { inject, type Ref, type ShallowRef, watchEffect } from 'vue';
import { inject, nextTick, type Ref, type ShallowRef, watchEffect } from 'vue';
import Sortable, { type SortableEvent } from 'sortablejs';
import { type TMagicTable } from '@tmagic/design';
@ -13,6 +13,7 @@ export const useSortable = (
emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
tMagicTableRef: ShallowRef<InstanceType<typeof TMagicTable> | null>,
modelName: Ref<string | number>,
updateKey: Ref<number>,
) => {
const mForm = inject<FormState | undefined>('mForm');
@ -36,6 +37,13 @@ export const useSortable = (
emit('change', newData);
mForm?.$emit('field-change', newData);
sortable?.destroy();
sortable = undefined;
nextTick(() => {
updateKey.value += 1;
});
},
});
};

6
packages/form/src/table/useTableColumns.ts
View File

@ -107,7 +107,7 @@ export const useTableColumns = (
actionFixed = props.config.fixed;
}
const actionClumn = {
const actionColumn = {
props: {
label: '操作',
fixed: actionFixed,
@ -133,7 +133,7 @@ export const useTableColumns = (
};
if (actionFixed !== 'right') {
columns.push(actionClumn);
columns.push(actionColumn);
}
if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) {
@ -237,7 +237,7 @@ export const useTableColumns = (
}
if (actionFixed === 'right') {
columns.push(actionClumn);
columns.push(actionColumn);
}
return columns;