element-ui 的table配合 vue-infinite-loading、sortablejs 实现表格的拖拽与下拉加载

产品要求，需要对el-table实现下拉加载 并且可以实现排序

话不多说，直接贴一下我的代码吧

<style lang="scss" rel="stylesheet/scss" slot-scoped>
    .sortable-ghost{
      opacity: .8;
      color: #fff!important;
      background: #42b983!important;
    }
  }
</style>

<template>
  <cd-page id="anticipation-priority" :breadcrumb="false" v-loading="loading">
      <div class="date-table">
        <el-table
          height="500px"
          :data="dataList">
          <el-table-column
            prop="priorityNumber"
            label="优先级调整"
            align="center"
            :show-overflow-tooltip="true"
            min-width="80">
            <template slot-scope="scope">
              <div class="left-img textc"><span class="left_img-text">{{scope.row.priorityNumber}}</span></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="registeredDate"
            label="登记时间"
            align="center"
            :show-overflow-tooltip="true"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="orgName"
            label="企业名称"
            align="center"
            :show-overflow-tooltip="true"
            min-width="160">
          </el-table-column>
          <el-table-column
            prop="saleUser"
            label="销售负责人"
            align="center"
            :show-overflow-tooltip="true"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="anticipationLeader"
            label="预判负责人"
            align="center"
            :show-overflow-tooltip="true"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="projectStageDesc"
            label="阶段"
            align="center"
            :show-overflow-tooltip="true"
            min-width="80">
          </el-table-column>
          <template slot="append">
            <infinite-loading ref="Infinite" @infinite="onInfinite" spinner="circles" :forceUseInfiniteWrapper="true">
          <span slot="no-more">
          —————————————————————————— 加载完成 ————————————————————————————
          </span>
              <span slot="no-results">暂无数据</span>
            </infinite-loading>
          </template>
        </el-table>
      </div>
  </cd-page>
</template>

<script>
  import {CdPage} from 'comp@'
  import {Table, TableColumn} from 'element-ui'
  import InfiniteLoading from 'vue-infinite-loading'
  import {codeAnticipationApi} from 'api@'
  import dayjs from 'dayjs'
  import Sortable from 'sortablejs'
  export default {
    components: {
      CdPage,
      [Table.name]: Table,
      [TableColumn.name]: TableColumn,
      InfiniteLoading
    },
    name: 'anti-pri',
    data () {
      return {
        loading: false,
        dataList: [],
        page: 1,
        sortable: null,
        numberList: ''
      }
    },
    methods: {
      onInfinite ($state) {
        let query = {
          projectStatus: '10_PROCESSING,30_OVER',
          projectStage: '10_REGISTRATION,20_ALLOCATION,30_ANALYZING,40_REVIEW'
        }
        codeAnticipationApi.anticipationQuery(query, this.page, 50).then((rst) => {
          if (rst) {
            if (rst.content.length) {
              rst.content.forEach((item) => {
                item.registeredDate = item.registeredDate ? dayjs(item.registeredDate).format('YYYY-MM-DD') : ''
                item.anticipationLeader = item.anticipationLeader || '无'
                item.saleUser = item.saleUser || '无'
              })
              this.dataList = this.dataList.concat(rst.content)
              this.numberList = this.dataList.map(v => v.priorityNumber)
              $state.loaded()
              this.page += 1
              if (this.dataList.length % 50 !== 0) {
                $state.complete()
              }
            } else {
              $state.complete()
            }
          } else {
            $state.complete()
          }
        }).catch(error => {
          this.$message.error('数据加载失败!原因:' + error)
          $state.complete()
        })
      },
      setSort () {
        const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost',
          setData: function (dataTransfer) {
            dataTransfer.setData('Text', '')
            // to avoid Firefox bug
          },
          onEnd: evt => {
            const targetRow = this.dataList.splice(evt.oldIndex, 1)[0]
            const tempIndex = this.numberList.splice(evt.newIndex, 1)[0]
            let data = {
              anticipationId: targetRow.anticipationId,
              priorityNumber: tempIndex
            }
            codeAnticipationApi.anticipationPriority(data).then((res) => {
              this.page = 1
              this.$set(this, 'dataList', [])
              this.$nextTick(() => {
                this.$refs.Infinite.$emit('$InfiniteLoading:reset')
              })
            }).catch((error) => {
              this.$message.error('排序失败：' + error)
            })
          }
        })
      }
    },
    created () {
      this.$nextTick(() => {
        this.setSort()
      })
    }
  }
</script>

放一下vue-infinite-loading 的官网链接： 官方

我用的版本号是2.3.3

这里提一下遇到的一个问题

vue-infinite-loading 配合el-table 他如果滚动条往下滚动，再this.$refs.Infinite.$emit('$InfiniteLoading:reset') 的时候，会触发两次请求，找了很久，一值没解决问题，结果，不得已看一下源码，发现

居然还有这个属性！！！！，把其加上去，完美解决。提了一个issue问了一下，作者是准备在下一个版本迭代的时候，补上文档。希望对你们有所帮助，谢谢

最后放一下效果：