diff --git a/CHANGELOG.md b/CHANGELOG.md index 15bb1d9befee816e63ad4eb30d5d5d7751d9ab3f..d1ad7e994325be4b56a73514554826db445a52f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ - 修复日历部件设置selectedDate为不是标准时间值时,组件监听selectedDate值改变后会重复加载数据 - 修复计数器数据大于99后样式显示异常 - 修复树表格增强操作列未对齐异常 +- 修复表单重复器-表格拖拽排序异常 ### Changed diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.tsx b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.tsx index bfe82179d7e203d4e329727921123b0ff85b3153..d27682662096b2d7db23ca8ce8f1e94f39385caf 100644 --- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.tsx +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.tsx @@ -4,8 +4,7 @@ import { toRaw, watch, reactive, - nextTick, - onMounted, + onUnmounted, defineComponent, resolveComponent, } from 'vue'; @@ -123,12 +122,14 @@ export const RepeaterGrid: ReturnType = defineComponent( { immediate: true, deep: true }, ); + let sortable: Sortable | undefined; + const rowDrop = () => { const wrapper = tableRef.value?.$el?.querySelector( '.el-table__body-wrapper tbody', ); if (!wrapper || !props.controller.enableSort) return; - Sortable.create(wrapper, { + sortable = Sortable.create(wrapper, { animation: 150, handle: `.${ns.e('drag-icon')}`, ghostClass: `${ns.e('sortable-ghost')}`, @@ -139,9 +140,12 @@ export const RepeaterGrid: ReturnType = defineComponent( }); }; - onMounted(() => { - nextTick(() => rowDrop()); - }); + watch(()=> tableRef.value, () => { + if (!props.controller.enableSort) return; + tableRef.value ? rowDrop() : sortable?.destroy(); + }) + + onUnmounted(() => sortable?.destroy()); const renderRemoveBtn = (index: number) => { if (!props.controller.enableDelete) {