ant design vue表格拖拽排序sortTableJS

最近用sortTableJS做了个基于antd的拖拽排序功能
话不多说直接上效果

列表拖拽

可以去官网细读文档sortTableJS

一、 npm或yarn引入sortablejs包

npm install sortablejs
yarn add sortablejs

二、 页面引用

import Sortable from 'sortablejs'

html代码：

 <div ref="Scheduling">
        <a-transfer :titles="['用户表', '已选中用户表']" :show-select-all="false" @change="handleChange">
          <template
            slot="children"
            slot-scope="{
              props: { direction, filteredItems, selectedKeys, selectedRowKeys },
              on: { itemSelectAll, itemSelect },
            }"
          >
            <a-input-search
              style="width: 200px"
              v-if="direction === 'left'"
              placeholder="用户昵称"
              v-model="query.userNikeName"
              @search="getMock"
            ></a-input-search>
            <a-table
              :scroll="{ y: 400 }"
              v-if="direction === 'left'"
              :row-selection="
                getRowLeftSelection({ selectedKeys, selectedRowKeys, itemSelectAll, itemSelect, onSelectLeftChange })
              "
              :columns="leftColumns"
              :data-source="mockData"
              size="small"
              :style="{ pointerEvents: null }"
              :custom-row="
                (record) => ({
                  on: {
                    click: () => {
                      var key = record.id
                      itemSelect(key, !selectedLeftRowKeys.includes(key))
                      if (selectedLeftRowKeys.includes(key)) {
                        selectedLeftRowKeys.splice(selectedLeftRowKeys.indexOf(key), 1)
                        selectedLeftRows.splice(selectedLeftRows.indexOf(record), 1)
                      } else {
                        selectedLeftRowKeys.push(key)
                        selectedLeftRows.push(record)
                      }
                    },
                  },
                })
              "
              :pagination="pagination"
              @change="pageChange"
              rowKey="id"
            />
            <a-table
              :scroll="{ y: 400 }"
              class="rightTable"
              ref="rightTable"
              v-else
              :pagination="false"
              :row-selection="
                getRowRightSelection({ selectedKeys, selectedRowKeys, itemSelectAll, itemSelect, onSelectRightChange })
              "
              :columns="rightColumns"
              :data-source="RightData"
              size="small"
              rowKey="id"
              :style="{ pointerEvents: null }"
              :custom-row="
                (record) => ({
                  on: {
                    click: () => {
                      var key = record.id
                      itemSelect(key, !selectedRightRowKeys.includes(key))
                      if (selectedRightRowKeys.includes(key)) {
                        selectedRightRowKeys.splice(selectedRightRowKeys.indexOf(key), 1)
                        selectedRightRows.splice(selectedRightRows.indexOf(record), 1)
                      } else {
                        selectedRightRowKeys.push(key)
                        selectedRightRows.push(record)
                      }
                    },
                  },
                })
              "
            />
          </template>
        </a-transfer>
      </div>

methods：

  rowDrop() {
      console.log(this.$refs.Scheduling)
      const tbody = this.$refs.Scheduling.querySelectorAll('.ant-table-tbody') // 元素选择器名称根据实际内容替换
      console.log(tbody)
      const _this = this
      Sortable.create(tbody[0], {
        // 官网上的配置项,加到这里面来,可以实现各种效果和功能
        sort: true,
        handle: '.ant-table-row',
        animation: 150, // ms, number 单位：ms，定义排序动画的时间
        group: { name: 'name', pull: true, put: true },
        ghostClass: 'sortable-ghost',
        onStart: function (evt) {
          _this.pullIndex = evt.oldIndex
          _this.pullRow = _this.mockData[evt.oldIndex]
        },
        onAdd({ newIndex, oldIndex }) {
          console.log(_this.RightData)
          _this.mockData.splice(newIndex, 0, _this.RightData[_this.pullIndex])
        },
        onRemove: function (evt) {
          console.log('左边Onremove')
          _this.mockData.splice(evt.oldIndex, 1)
        },
      })
      Sortable.create(tbody[1], {
        sort: true,
        handle: '.ant-table-row',
        animation: 150,
        group: { name: 'name', pull: true, put: true },
        ghostClass: 'sortable-ghost',
        onStart: function (evt) {
          _this.pullIndex = evt.oldIndex
        },
        onUpdate({ newIndex, oldIndex }) {
          console.log('右边onUpdate')
          const currRow = _this.RightData.splice(oldIndex, 1)[0]
          _this.RightData.splice(newIndex, 0, currRow)
          console.log(_this.RightData)
        },
        onAdd({ newIndex, oldIndex }) {
          console.log(_this.RightData)
          let isData = _this.RightData.findIndex((item) => {
            return item.id == _this.pullRow.id
          })
          if (isData == -1) {
            _this.RightData.splice(newIndex, 0, _this.mockData[_this.pullIndex])
          } else {
            _this.RightData.splice(isData, 1)
            _this.RightData.splice(newIndex, 0, _this.mockData[_this.pullIndex])
          }
        },
        onRemove: function (evt) {
          _this.RightData.splice(evt.oldIndex, 1)
        },
      })
    },