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

 

            id="tt"

            size="small"

            bordered

            rowKey=" planId"

            :columns="columnsPro"

            :dataSource="dataPro"

            :pagination="false"

            :loading="loading"

            class="j-table-force-nowrap"

            @change="handleTableChange"

          >

           

             

                删除

             

           

         

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)

        },

      })

    },

}