vue +element ，el-table實現行和列拖拽排序

場景

element ui 表格沒有自帶的拖拽排序的功能，只能借助第三方插件Sortablejs來實現。

實現步驟

1.安裝Sortable.js

npm install sortablejs --save

2.在頁面中引入：

import Sortable from ‘sortablejs’

注意

element table務必指定row-key，row-key必須是唯一的，如ID，不然會出現排序不對的情況。但是不可用index，因為拖拽后index會變，會有問題。

完整代碼

<template>
    <div >
        <el-table :data="tableData"  row-key="id">
            <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, { // 指定父元素下可被拖拽的子元素
                  draggable: ".el-table__row", 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>