From 617b025ce13b87c11292db39d741cf769cbcbc9d Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 7 Nov 2022 15:49:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20table=20=E6=8B=96=E5=8A=A8?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design/src/Table.vue          | 12 ++++++++++--
 packages/form/src/containers/Table.vue | 20 +++++++++++---------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/design/src/Table.vue b/packages/design/src/Table.vue
index 5b179d86..7d353bd9 100644
--- a/packages/design/src/Table.vue
+++ b/packages/design/src/Table.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts" name="TMTable">
-import { computed, ref } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
 import { getConfig } from './config';
 
@@ -43,8 +43,16 @@ const sortChangeHandler = (...args: any[]) => {
   emit('sort-change', ...args);
 };
 
+let $el: HTMLDivElement | undefined;
+
+watchEffect(() => {
+  $el = table.value?.$el;
+});
+
 defineExpose({
-  $el: table.value?.$el,
+  instance: table,
+
+  $el,
 
   clearSelection(...args: any[]) {
     return table.value?.clearSelection(...args);
diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index 0a1cac17..bb312ce1 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -160,7 +160,7 @@
 </template>
 
 <script setup lang="ts" name="MFormTable">
-import { computed, inject, onMounted, ref, toRefs } from 'vue';
+import { computed, inject, onMounted, ref, toRefs, watchEffect } from 'vue';
 import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 import Sortable, { SortableEvent } from 'sortablejs';
@@ -248,11 +248,11 @@ const swapArray = (index1: number, index2: number) => {
 };
 
 const rowDrop = () => {
-  const tableEl = tMagicTable.value?.$el;
-  if (tableEl?.querySelectorAll('.el-table__body > tbody')) {
+  const tableEl = tMagicTable.value?.instance.$el;
+  const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
+  if (tBodyEl) {
     // eslint-disable-next-line prefer-destructuring
-    const el = tableEl.querySelectorAll('.el-table__body > tbody')[0];
-    const sortable = Sortable.create(el, {
+    const sortable = Sortable.create(tBodyEl, {
       onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
         if (typeof newIndex === 'undefined') return;
         if (typeof oldIndex === 'undefined') return;
@@ -262,11 +262,11 @@ const rowDrop = () => {
         sortable.destroy();
         mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
         sleep(1000).then(() => {
-          const eltrs = tableEl.querySelectorAll('.el-table__body > tbody > tr');
-          if (eltrs?.[newIndex]) {
-            eltrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)';
+          const elTrs = tableEl.querySelectorAll('.el-table__body > tbody > tr');
+          if (elTrs?.[newIndex]) {
+            elTrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)';
             sleep(1000).then(() => {
-              eltrs[newIndex].style.backgroundColor = '';
+              elTrs[newIndex].style.backgroundColor = '';
             });
           }
         });
@@ -348,7 +348,9 @@ onMounted(() => {
   if (props.sort && props.sortKey) {
     props.model[modelName.value].sort((a: any, b: any) => b[props.sortKey] - a[props.sortKey]);
   }
+});
 
+watchEffect(() => {
   if (props.config.dropSort) {
     rowDrop();
   }