element-UI ，Table组件实现拖拽效果

 

拖拽效果，先放效果图，步骤放在后面~~

 

 

 

 

1、引入三方插件

1.引入sortable.js的包: npm install sortable.js --save

2.或者npm i -S vuedraggable

　　vuedraggable依赖 Sortable.js，因此下载了vuedraggable，咱们即可以直接引入Sortable使用Sortable的特性。

　　vuedraggable是Sortable一种增强，实现组件化的思想，能够结合Vue，使用起来更方便

 

2、Sortable使用

在这里咱们仍是使用一句Sortable的构建方式

import Sortable from 'sortablejs';

 

3、实例

须要注意的是element table务必指定row-key，row-key必须是惟一的，如ID，否则会出现排序不对的状况。

<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>
    <pre style="text-align: left"> {{dropCol}} </pre>
    <hr>
    <pre style="text-align: left"> {{tableData}} </pre>
  </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>

 

4、补充说明

　　能够直接绑定从服务器查询到的结果，也能够动态绑定vueX里的数据，如要保存排序结果的话，则须要后台根据保存时的数据顺序进行保存

 

嗯。就酱~~

 

参考https://www.jianshu.com/p/6da3043aed2a

参考https://www.2cto.com/kf/201811/785039.html