常量变量声明都已省略。。。。自己定义

1.效果

   <a-table
      size="small"
      :columns="sourceColumns"
      :data-source="sourceData"
      bordered
      :pagination="
        SourceTableConfig.pagination ? objArray.sourcePagination : false
      "
      v-if="SourceTableConfig.showSource"
      :row-selection="
        SourceTableConfig.sourceRowSelection
          ? {
              fixed: true,
              hideSelectAll: true,
              selectedRowKeys: objArray.selectedSourceRowKey,
              onChange: changeSourceRow,
            }
          : null
      "
      :rowKey="(record) => record.id"
      class="sortTable"
    >
      <template #bodyCell="{ column, index, record, text }">
        <template v-if="column.ellipsis == true">
          <a-tooltip placement="topLeft" :title="text">
            <span class="ellipsis">{{ text }}</span>
          </a-tooltip>
        </template>
        <template v-if="column && column.dataIndex == 'index'">
          <span>{{
            `${
              (objArray.sourcePagination.current - 1) *
                objArray.sourcePagination.pageSize +
              index +
              1
            }`
          }}</span>
        </template>
        <template v-if="column.key === 'lastModificationTime'">
          <span>{{
            record.lastModificationTime
              ? moment(record.lastModificationTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                )
              : moment(record.creationTime).format("YYYY-MM-DD HH:mm:ss")
          }}</span>
        </template>
        <template v-if="column.key === 'creationTimes'">
          <span>{{
            record.creationTimes
              ? moment(record.creationTimes).format("YYYY-MM-DD HH:mm:ss")
              : ""
          }}</span>
        </template>
        <template v-if="column && column.dataIndex == 'action'">
          <span>
            <a @click="showUser(record)">对应用户</a>
            <a-divider type="vertical" />
            <a @click="delSourceEvent(record)">删除</a>
          </span>
        </template>
      </template>
      <template #title>
        <a-button @click="addSourceEvent" v-show="curID">{{
          SourceTableConfig.addName
        }}</a-button>
        <a-button
          v-if="SourceTableConfig.isSort && sourceData.length"
          @click="changeSort"
          style="margin-left: 20px"
          v-show="curID"
          >调整排序</a-button
        >
        <a-alert
          v-if="sortType"
          message=""
          style="margin-top: 10px"
          type="warning"
        >
          <template #description>
            <span>
              上下移动调整位置
              <a
                class="c_link"
                style="margin-left: 10px"
                @click="handleSaveSort"
                >保存</a
              >
              <a class="c_link" style="margin-left: 10px" @click="cencleSort"
                >撤销</a
              >
            </span>
          </template>
        </a-alert>
      </template>
    </a-table>

// 排序
onMounted(() => {
  rowDrop();
});
let sortTable = ref(null);
function rowDrop() {
  nextTick(() => {
    const el = document.querySelector(".sortTable .ant-table-tbody");
    if (el) {
      if (sortTable.value) {
        sortTable.value.destroy();
      }
      sortTable.value = new Sortable(el, {
        // draggable: ".ant-table-row",
        disabled: !sortType.value,
        onEnd({ newIndex, oldIndex }) {
          const currRow = sourceData.value.splice(oldIndex, 1)[0];
          sourceData.value.splice(newIndex, 0, currRow);
          // 截止上面为止，数组已经进行了更换，但是会看到视图没有更新，所以就进行了数组清空重新赋值
          const newArray = sourceData.value.slice(0);
          sourceData.value = [];
          sourceData.value = [...newArray];
        },
      });
    }
  });
}
const sortType = ref(false);
const changeSort = () => {
  sortType.value = !sortType.value;
  rowDrop();
};
const handleSaveSort = () => {
  changeSort();
  const params = sourceData.value.map((e, i) => {
    return {
      id: e.curid,
      ordinal: i,
      roleId: e.roleId,
    };
  });
  props.SourceTableConfig.bulkOrganizationUpdate([...params], props.curID)
    .then((res) => {
      if (res) {
        openNotificationWithIcon("success", "成功", `调整排序成功`, () => {
          this.$emit("getTreeData");
        });
      } else openNotificationWithIcon("error", "提示");
    })
    .catch((err) => {
      openNotificationWithIcon("error", "提示");
      console.log(err);
    });
};
const cencleSort = () => {
  sortType.value = !sortType.value;
  sourceData.value.splice(0);
  getSourceTableData();
};

2.列表排序

    <div class="c_action_content">
      <a-button class="contact_btn" size="small" @click="addSourceEvent" v-show="curID">添加子部门</a-button>
      <a-button class="contact_btn" size="small" @click="changeSort" v-show="curID&&sourceData.length">调整排序</a-button>
    </div>
    <a-alert v-if="sortType == true" message="" type="warning">
      <template v-slot:description>
       <span>
        上下移动调整位置
        <a class="c_link" style="margin-left:10px;" @click="handleSaveSort">保存</a>
        <a class="c_link" style="margin-left:10px;" @click="cencleSort">撤销</a>
      </span>
      </template>
    </a-alert>
    <a-list bordered class="c_subDep_list" size="small" :data-source="sourceData">
     <div class="floor"> 
        <a-list-item v-for="(item, index) in sourceData" :key="`sourceData${index}`" :class="sortType == true ? 'test' : '' " @click="handleNext(item)">
          <span>{{ item.name }}</span>
         <right-outlined />
        </a-list-item>
      </div>
    </a-list>
     <a-empty class="ant-empty-normal" v-show="sourceData.length==0" :image="simpleImage"/>

// 排序
let sortTable = ref(null);
function rowDrop() {
        const tbody = document.querySelector('.floor')
      if(tbody) {
        Sortable.create(tbody, {
          draggable: '.test',
          chosenClass: 'sortable-chosen',
          ghostClass: 'sortable-ghost',
          onEnd ({ newIndex, oldIndex }) {
            const currRow = sourceData.value.splice(oldIndex, 1)[0]
           sourceData.value.splice(newIndex, 0, currRow)
            // 截止上面为止，数组已经进行了更换，但是会看到视图没有更新，所以就进行了数组清空重新赋值
            const newArray = sourceData.value.slice(0)
           sourceData.value= []
           nextTick(() => {
              sourceData.value = [...newArray]
            })
          }
        })
      }
}
const sortType = ref(false);
const changeSort = () => {
  sortType.value = !sortType.value;
  rowDrop();
};
const handleSaveSort = () => {
  changeSort()
   const params = sourceData.value.map((e, i) => {
    return {
      id: e.id,
      ordinal: i
    }
  })
  props.SourceTableConfig.bulkOrganizationUpdate([...params],props.curID).then(res => {
    if (res) {
      message.success('调整排序成功')
      props.refreshFunc()
    } else message.error('调整排序失败')
  }).catch(err => {
     message.error('调整排序失败')
    console.log(err)
  })
};
const cencleSort = () => {
   sortType.value = !sortType.value;
   getSourceTableData()
   rowDrop();
};