element table sortable.js(拖拽 行 列)

js简单记录一下

先看效果图：

稍作修改：

项目需要点击按钮才能拖拽（handle: '.move', // handle's class ）

二话不说直接上代码

<template>
<div><el-table row-key="date" ref="table" border :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-columnlabel="操作"width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button><div class="move">排序</div></template></el-table-column></el-table><pre>{
   { tableData }}</pre>
</div>
</template>

js：注意：row-key必填且唯一（例如id），否则将排序出错

<script>
import Sortable from 'sortablejs';
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},mounted() {const table = document.querySelector('.el-table__body-wrapper tbody')const self = thisSortable.create(table, {handle:".move",onEnd({ newIndex, oldIndex }) {const targetRow = self.tableData.splice(oldIndex, 1)[0]self.tableData.splice(newIndex, 0, targetRow)console.log(self.tableData,'000')}})},methods:{handleClick(row) {console.log(row);}}
}
</script>

 列：

  //列拖拽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)}})}

列参考：element-UI ，Table组件实现拖拽效果 - 靳哲 - 博客园