And Desgin Table 拖拽

Ant Desgin 项目遇到需求，表格要实现拖拽，找到第三方插件

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

table 必须指定rowKey且是唯一值，这样不会引发排序错误

<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: '创建人'
          },
          {
            id: 122,
            code: 22,
            produceDate: '2020-07-12',
            workshopName: '车间1',
            worklineName: '线体名称1',
            shiftName: '班次名称1',
            onlineStationName: '上线点1',
            state: 2,
            updateTime: '2020-08-01',
            createName: '创建人1'
          },
          {
            id: 133,
            code: 22,
            produceDate: '2020-07-31',
            workshopName: '车间2',
            worklineName: '线体名称2',
            shiftName: '班次名称2',
            onlineStationName: '上线点2',
            state: 1,
            updateTime: '2020-08-03',
            createName: '创建人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: '状态',
            dataIndex: 'state',
            align: 'center',
            customRender: (value) => {
              const content = value === 0 ? '制单' : (value === 1 ? '提交' : (value === 2 ? '审核' : '发布'))
              return content
            }
          },
          {
            title: '计划更新时间',
            dataIndex: 'updateTime',
            align: 'center'
          },
          {
            title: '创建人',
            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