ant design vue实现表格拖拽排序sortTableJS

首先需要下载sortTableJS，配置项中文文档地址如下

http://www.sortablejs.com/options.html

下包 和 引入

npm install sortable.js --save 

import Sortable from 'sortablejs'

html代码：

 <a-modal
    :visible="visible"
    :v-if="visible"
    :title="title"
    cancelText="返回"
    @ok="handleOk"
    @cancel="handleCancel"
    :forceRender="true"
  >
    <div ref="Scheduling">
      <a-table
        ref="table"
        :scroll="{ y: true }"
        bordered
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnTitle: '显示' }"
        rowKey="id"
        :columns="columns"
        size="small"
        :data-source="tableData"
        :pagination="false"
      >
        <template v-slot:order="t">
          <div class="dragSort">{{ t }}</div>
        </template>
      </a-table>
    </div>
  </a-modal>

js代码：

   data() {
    return {
      tableData: [
        {
          id: '1',
          menu: '1',
          order: '',
        },
        {
          id: '2',
          menu: '2',
          order: '',
        },
        {
          id: '3',
          menu: '3',
          order: '',
        },
      ],
      columns: [
        {
          title: '菜单名',
          dataIndex: 'menu',
          key: 'menu',
          align: 'center',
        },
        {
          title: '拖动调整顺序',
          dataIndex: 'order',
          key: 'order',
          align: 'center',
          scopedSlots: { customRender: 'order' },
        },
      ],
    }
  },

mounted() {
    this.$nextTick(() => {
      this.rowDrop()
    })
  },

 methods: {
    //行拖拽
    rowDrop() {
      const tbody = this.$refs.Scheduling.querySelectorAll('.ant-table-tbody') // 元素选择器名称根据实际内容替换
      console.log(tbody[0])
      const _this = this
      Sortable.create(tbody[0], {
        sort: true,
        // fallbackClass: true,
        animation: 150, //动画
        handle: '.dragSort', //指定哪个类名的可以拖动
        //handle: '.ant-table-tbody', //使用这个类名则是整行任意位置都可以拖动
        //chosenClass: 'sortable-ghost',被选中项的css 类名
        //dragClass: 'sortable-drag',正在被拖拽中的css类名
        group: { name: 'name', pull: true, put: true },
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        },
      })
    },
  },

css代码：（拖动的时候效果不是很明显，设置了被选中和被拖动时的类名但是没有起效果也不知道怎么回事）

.dragSort {
  cursor: pointer;
}