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