vue+table行列拖拽移动

 

目的：实现table行或者列的拖拽移动到一定位置
方案： 借助第三方插件Sortablejs
注意点： element table一定要指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。但是不能用index，因为拖拽后index会发生变化

code

安装
npm install sortablejs --save

引入
import Sortable from ‘sortablejs’

　

<template>
    <div >
        <el-table :data="tableData"  row-key="id">
            <el-table-column v-for="(item, index) in colData"   :key="`col_${index}`"   
           :prop="dropColData[index].prop"    :label="item.label">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import Sortable from 'sortablejs';
 
    export default {
        data () {
            return {
                colData:[{label: '日期',  prop: 'date' },  { label: '姓名',  prop: 'name' }, 
                                  {label: '地址', prop: 'address'}],
                dropColData:[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.colDrop();
        },
        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);
                    }
                });
            },
            // 列表 **列拖拽
            colDrop () {
                const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
                this.sortable = Sortable.create(wrapperTr, {
                    animation: 180,
                    delay: 0,
                    onEnd: evt => {
                        const oldItem = this.dropColData[evt.oldIndex];
                        this.dropColData.splice(evt.oldIndex, 1);
                        this.dropColData.splice(evt.newIndex, 0, oldItem);
                    }
                });
            }
        }
    };
</script>