Ant Desgin 項目遇到需求，表格要實現(xiàn)拖拽利耍，找到第三方插件

sortable.js
- 安裝依賴   npm install sortablejs --save-dev
- 引入插件   import Sortable from 'sortablejs'

table 必須指定rowKey且是唯一值蚌本，這樣不會引發(fā)排序錯誤

<template>
  <div>
    <a-table
      size="small"
      rowKey="id"
      :columns="columns"
      :dataSource="loadData"
    >
    </a-table>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  export default {
    name: 'TheTableComponents',
    data () {
      return {
        loadData: [
          {
            id: 123,
            code: 22,
            produceDate: '2020-07-31',
            workshopName: '車間',
            worklineName: '線體名稱',
            shiftName: '班次名稱',
            onlineStationName: '上線點',
            state: 3,
            updateTime: '2020-08-02',
            createName: '創(chuàng)建人'
          },
          {
            id: 122,
            code: 22,
            produceDate: '2020-07-12',
            workshopName: '車間1',
            worklineName: '線體名稱1',
            shiftName: '班次名稱1',
            onlineStationName: '上線點1',
            state: 2,
            updateTime: '2020-08-01',
            createName: '創(chuàng)建人1'
          },
          {
            id: 133,
            code: 22,
            produceDate: '2020-07-31',
            workshopName: '車間2',
            worklineName: '線體名稱2',
            shiftName: '班次名稱2',
            onlineStationName: '上線點2',
            state: 1,
            updateTime: '2020-08-03',
            createName: '創(chuàng)建人2'
          }
        ],
        columns: [
          {
            title: '序號',
            width: 50,
            customRender: (text, record, index) => {
              return index + 1
            },
            align: 'center',
            fixed: 'left',
            customCell: (column) => {
              column.style = { 'min-width': '50px', overflow: 'hidden', 'width': '50px' }
              return column
            }
          },
          {
            title: '計劃編號',
            dataIndex: 'code',
            align: 'center',
            customRender: (value, record) => {
              return <a onClick={() => {
                this.$refs.addModel.handleEdit(record)
              }}>{value}</a>
            }
          },
          {
            title: '計劃生產日期',
            dataIndex: 'produceDate',
            align: 'center'
          },
          {
            title: '車間名稱',
            dataIndex: 'workshopName',
            align: 'center'
          },
          {
            title: '線體名稱',
            dataIndex: 'worklineName',
            align: 'center'
          },
          {
            title: '班次',
            dataIndex: 'shiftName',
            align: 'center'
          },
          {
            title: '上線點',
            dataIndex: 'onlineStationName',
            align: 'center'
          },
          {
            title: '狀態(tài)',
            dataIndex: 'state',
            align: 'center',
            customRender: (value) => {
              const content = value === 0 ? '制單' : (value === 1 ? '提交' : (value === 2 ? '審核' : '發(fā)布'))
              return content
            }
          },
          {
            title: '計劃更新時間',
            dataIndex: 'updateTime',
            align: 'center'
          },
          {
            title: '創(chuàng)建人',
            dataIndex: 'createName',
            align: 'center'
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' },
            width: 120,
            align: 'center'
          }
        ],
      }
    },
    methods: {
      handletest () {
      },
      //行
      rowDrop () {
        const tbody = document.querySelector('.ant-table-tbody') //獲取table列表
        const self = this
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            console.log(newIndex, oldIndex, self)
            const currRow = self.loadData.splice(oldIndex, 1)[0]
            self.loadData.splice(newIndex, 0, currRow)
          }
        })
      },
      //列
      columnDrop () {
        const wrapperTr = document.querySelector('tr')
        console.log(wrapperTr, 'tr')
        const self = this
        Sortable.create(wrapperTr, {
          animation: 180,
          delay: 0,
          onEnd: evt => {
            const oldItem = self.columns[evt.oldIndex]
            self.columns.splice(evt.oldIndex, 1)
            self.columns.splice(evt.newIndex, 0, oldItem)
          }
        })
      }
    },
    mounted () {
      // 阻止默認事件及事件冒泡
      document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
      };
      // 調用方法
      this.rowDrop()
      this.columnDrop()
    }
  }
</script>

<style scoped>

</style>

轉載 https://www.cnblogs.com/jin-zhe/p/10181852.html