github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-12-11 18:42:52 +00:00
Code Issues Packages 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 { nextZIndex } = useZIndex();
const updateKey = ref(1);
const { addable, newHandler } = useAdd(props, emit); const { addable, newHandler } = useAdd(props, emit);
const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName); const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
useSortable(props, emit, tMagicTableRef, modelName); useSortable(props, emit, tMagicTableRef, modelName, updateKey);
const { isFullscreen, toggleFullscreen } = useFullscreen(); const { isFullscreen, toggleFullscreen } = useFullscreen();
const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler); const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef); const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
const updateKey = ref(1);
const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value])); const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value]));
const toggleMode = () => { 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 Sortable, { type SortableEvent } from 'sortablejs';
import { type TMagicTable } from '@tmagic/design'; import { type TMagicTable } from '@tmagic/design';
@ -13,6 +13,7 @@ export const useSortable = (
emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void, emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
tMagicTableRef: ShallowRef<InstanceType<typeof TMagicTable> | null>, tMagicTableRef: ShallowRef<InstanceType<typeof TMagicTable> | null>,
modelName: Ref<string | number>, modelName: Ref<string | number>,
updateKey: Ref<number>,
) => { ) => {
const mForm = inject<FormState | undefined>('mForm'); const mForm = inject<FormState | undefined>('mForm');
@ -36,6 +37,13 @@ export const useSortable = (
emit('change', newData); emit('change', newData);
mForm?.$emit('field-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; actionFixed = props.config.fixed;
} }
const actionClumn = { const actionColumn = {
props: { props: {
label: '操作', label: '操作',
fixed: actionFixed, fixed: actionFixed,
@ -133,7 +133,7 @@ export const useTableColumns = (
}; };
if (actionFixed !== 'right') { if (actionFixed !== 'right') {
columns.push(actionClumn); columns.push(actionColumn);
} }
if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) { if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) {
@ -237,7 +237,7 @@ export const useTableColumns = (
} }
if (actionFixed === 'right') { if (actionFixed === 'right') {
columns.push(actionClumn); columns.push(actionColumn);
} }
return columns; return columns;