vue插件实现表格拖拽 sortable 遇见的坑

下载插件  npm install sortable.js --save （下载的时候一定要这样去下载，不要去下载    npm install sortable--save ）
因为sortable.js和sortable是不一样的哈

引入      import Sortable from 'sortablejs'; 

//   千万不要加点.js  否者就会报错create不是一个方法

注意  这个插件是不要注册的哈。
需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。
参考的地址  https://blog.csdn.net/qq_26440803/article/details/83663511

为啥一开始就在mounted中调用了两个函数，不太懂？？？？？

<template>
  <div style="width:800px">

    <el-table :data="tableData"
      border
      row-key="id"
      align="left">

     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ]
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>

https://www.cnblogs.com/xiangcheng618/p/10241090.html 这个地址也可以进行拖拽，明天去研究一下

在后来和产品的沟通中发现，并不是这样的效果。

他希望排序后，做左边的日期也能够排序。

所以其他的都不改变，是改变这个rowDrop方法。

//行拖拽
      rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)

          //对日期进行重新排序
          for(let i=0;i<_this.tableData.length;i++){
            _this.tableData[i].date=i+1;
          }

        }
      })
    },

如何达到产品说的那一种效果。我之前回来想了很久。都没有做好.
今天忽然脑壳开窍了，就想明白了。
我觉得  思维灵活比是编成中最重要的，没有之一哈。

需要注意一下，你在浏览器中是ok的；
但是你在火狐浏览器上会出现拖拽的时
火狐还是打开了一个新的tab，并且搜索了。
那么应该如何去解决呢？？？
created() {
    document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    }
},