ant-design-vue 上下移动表格的行

 <a-table

            id="tt"

            size="small"

            bordered

            rowKey=" planId"

            :columns="columnsPro"

            :dataSource="dataPro"

            :pagination="false"

            :loading="loading"

            class="j-table-force-nowrap"

            @change="handleTableChange"

          >

            <span slot="action" slot-scope="text, record">

              <a-popconfirm title="确定删除吗?" @confirm="() => handleDeletePro(record.planId)">

                <a :disabled="formDisabled">删除</a>

              </a-popconfirm>

            </span>

          </a-table>

import Sortable from 'sortablejs'

  mounted() {

    this.initSortTable()

  },

    //上下移动表格行

    initSortTable() {

      const tbody = document.querySelector('#tt tbody')

methods：{

  let that = this

      new Sortable(tbody, {

        handle: '.ant-table-row',

        animation: 150,

        ghostClass: 'blue-background-class',

        sort: true,

        onEnd({ newIndex, oldIndex }) {

          debugger

          console.log(oldIndex, newIndex)

          const currRow = that.dataPro.splice(oldIndex, 1)[0]

          that.dataPro.splice(newIndex, 0, currRow)

        },

      })

    },

}