vxe-table+Sortable实现大数据表格的拖动

<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="结构体" name="first">
        <div class="structure-system">
          <section class="left-structure-system">
            <div class="establishment">
              <p class="title">结构体</p>
              <div style="display:flex;">
                <div class="add-style" @click="editHandle(1,0)" v-if="isShowColumn">
                  <img src="@/assets/imgs/add.png" alt="" />
                </div>
                <div class="delete-style" @click="opretion('batchDeleteStructure')" v-if="isShowColumn">
                  <img src="@/assets/imgs/delete.png" alt="" />
                </div>
              </div>
            </div>
            <div>
              <el-input placeholder="请输入结构体别名、标识" v-model="ruleName.keyword" clearable prefix-icon="Search">
              </el-input>
            </div>
            <p class="subheading">结构体标识（结构体别名）</p>
            <!-- 结构树 -->
            <div class="down-tree">
              <el-tree :style="{height:tableHeight+ 'px'}" ref="tree" show-checkbox :data="data" :props="defaultProps" node-key="structId" @node-click="handleNodeClick" :highlight-current="true">
                <template #default="{node,  data}">
                  <section class="custom-node-tree">
                    <el-dropdown>
                      <div>{
  {node.label}}</div>
                      <template #dropdown v-if="isShowColumn">
                        <el-dropdown-menu>
                          <el-dropdown-item @click="editHandle(3,data)">
                            <img src="@/assets/imgs/modification.png" style="height:30px;" alt="" />
                            <span>编辑</span>
                          </el-dropdown-item>
                          <el-dropdown-item @click="opretion('del',data)">
                            <img src="@/assets/imgs/delete.png" style="height:30px;" alt="" />
                            <span style="color:#F54A45;">删除结构体</span>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </section>
                </template>
              </el-tree>
            </div>
          </section>
          <div class="structure-system-resize"></div>
          <section class="right-structure-system">
            <div class="title" style="display:flex;width:100%;">
              <span class="linkage" v-for="item in structInfo" :key="item.id" @click="opretion('threeClickRule',item)">
                <el-icon class="f-ml-10 f-mr-10">
                  <DArrowRight />
                </el-icon>
                <span class="click-attribute">{
  {item.attribute||''}}</span>
              </span>
            </div>
            <div class="search-form">
              <el-form :model="form1">
                <el-form-item>
                  <el-input v-model="form1.keyword" placeholder="请输入结构体别名、标识" clearable prefix-icon="Search" @change="opretion('searchKeyword')">
                  </el-input>
                </el-form-item>
              </el-form>
              <div style="display:flex;" v-show="data.length>0 && isShowColumn">
                <div class="add-style" @click="addContactPerson" v-if="isShowColumn">
                  <img src="@/assets/imgs/add.png" alt="" />
                </div>
                <div class="delete-style" @click="handleRowDelete" v-if="isShowColumn">
                  <img src="@/assets/imgs/delete.png" alt="" />
                </div>
              </div>
            </div>
            <!-- 表格 -->
            <div :style="{height:tableHeight+ 'px'}">
              <vxe-table show-overflow keep-source :row-config="{useKey: true}" :height="tableHeight-60+'px'" ref="xTable" border resizable :data="tableData.structural" :edit-rules="validRules"
                :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}" :checkbox-config="{ highlight: true, range: true}"
                :header-cell-style="{background:'#F2F3F5',color:'#070707',fontSize:'14px'}" :cell-style="cellStyle" @checkbox-change="checkboxChangeEvent" @checkbox-all="selectAllEvent">
                <vxe-column type="checkbox" width="80"></vxe-column>
                <vxe-column width="60">
                  <template #default>
                    <el-icon class="move-icon">
                      <Switch />
                    </el-icon>
                  </template>
                  <template #header>
                    <el-tooltip effect="dark" content="按住后可以上下拖动排序！" placement="left">
                      <i class="vxe-icon-question-circle-fill box-item"></i>
                    </el-tooltip>
                  </template>
                </vxe-column>
                <vxe-column field="itemAlias" title="显示名" :edit-render="{}">
                  <template #default="{ row }">
                    <el-link type="primary" v-if="row.attribute=='struct'" @click="opretion('secondary',row)">{
  { row.itemAlias }}</el-link>
                    <span v-else>{
  { row.itemAlias }}</span>
                  </template>
                  <template #edit="{ row }">
                    <vxe-input v-model="row.itemAlias" type="text"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="itemCode" title="标识符" :edit-render="{}">
                  <template #edit="{ row }">
                    <vxe-input v-model="row.itemCode" type="text"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="dataTypeId" :edit-render="{}" title="类型">
                  <template #edit="{ row }">
                    <div class="g-flex-ct">
                      <el-select v-model="row.dataTypeId" filterable remote reserve-keyword clearable :remote-method="remoteMethod" style="width:80%;">
                        <el-option v-for="item in valueTypeList" :key="item.dataTypeId" :value="item.dataTypeId" :label="item.dataName"></el-option>
                      </el-select>
                    </div>
                  </template>
                  <template #default="{ row }">
                    <div class="g-flex-ct">
                      <el-select v-model="row.dataTypeId" filterable remote reserve-keyword :remote-method="remoteMethod" style="width:80%;">
                        <el-option v-for="item in valueTypeList" :key="item.dataTypeId" :value="item.dataTypeId" :label="item.dataName"></el-option>
                      </el-select>
                      <el-icon v-show="row.attribute=='struct'" @click="opretion('secondary',row)" class="f-ml-10">
                        <Connection />
                      </el-icon>
                    </div>
                  </template>
                </vxe-column>
                <vxe-column field="unit" title="单位" :edit-render="{}">
                  <template #edit="{ row }">
                    <vxe-input v-model="row.unit" type="text" placeholder="请输入数值"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="