下载插件 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(); } },
