vue实现拖拽排序---插件sortablejs

vue实现拖拽排序—插件sortablejs

首先安装npm i sortablejs

<template>
  <a-table ref="table" class="exchange_table" style="width: 90%;background: #fff" :pagination="false"
            :columns="columns" :data-source="ranking_goods">
            <template slot="sort">
              <div class="drag-btn" style="width: 100px">
                <byf-icon type="iconsan"></byf-icon>
              </div>
            </template>
            <template slot="rank" slot-scope="text,record,index">
              <span v-if="index == 0" class="status1">{{index+1}}</span>
              <span v-if="index == 1" class="status3">{{index+1}}</span>
              <span v-if="index == 2" class="status2">{{index+1}}</span>
              <span v-if="index > 2">{{index+1}}</span>
            </template>
          </a-table>
</template>
<script>
  import Sortable from "sortablejs";
  export default {
	data() {
      return {
        sortable: null,
        columns: [{
            title: "拖动排序",
            key: "sort",
            scopedSlots: {
              customRender: "sort"
            },
          },
          {
            title: "排名",
            key: "rank",
            width: '100px',
            scopedSlots: {
              customRender: "rank"
            },
          },
        ],
        ranking_goods:[],
      }
     },
       mounted() {
         setTimeout(() => {
          let tbody = document.getElementsByClassName('exchange_table')[0].getElementsByTagName('tbody');
          tbody[0] && (tbody[0].className += ' box-table');
          this.initSortTable();
        }, 1000)
       }
      methods: {
      //初始化排序
      initSortTable() {
        let that = this;
        this.sortable = new Sortable(document.getElementsByClassName('box-table')[0], {
          animation: 150,
          handle: '.drag-btn',
          onEnd: (e) => {
            // 获取排序之后的data数据
            that.ranking_goods.splice(e.newIndex, 0, that.ranking_goods.splice(e.oldIndex, 1)[0]);
            var newArray = that.ranking_goods.slice(0);
            that.ranking_goods = []
            that.$nextTick(function () {
              that.ranking_goods = newArray
            })
          }
        })

      },
      }
  }