element ui 表格+sortablejs行拖拽排序

element ui 表格+sortablejs行拖拽排序

首先要在项目中本地安装 sortablejs：
执行 ：npm install sortablejs --save

可以挂载到vue下面，就可以全局使用了
在main.js中

import Sortable  from 'sortablejs';
Vue.prototype.$Sortable = Sortable

或者在要实现表格拖拽的.vue文件中 引入 sortablejs：
import Sortable from ‘sortablejs’

需要在vue 的 mounted 方法中 进行sortable的初始化：

mounted () {
        this.$nextTick(() => {
            this.setSort()
        })
    }

在methods中：

 setSort () {
            const that = this
            const el = this.$refs.checkedTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
            new this.$Sortable(el, {
                ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
                setData: function (dataTransfer) {
                },
                onEnd: evt => {
                    const targetRow = this.formData.camIds.splice(evt.oldIndex, 1)[0];
                    this.formData.camIds.splice(evt.newIndex, 0, targetRow);
                    this.formData.camIds.forEach((item, index) => {
                        item.orderNo = index + 1;
                    })
                    const arr = JSON.parse(JSON.stringify(this.formData))
                    //在data中定义变量showtable ，拖拽完成重新渲染界面，解决拖拽后排序混乱问题
                    //正常来看很多人应该是没有这个问题的，我是用element的tree组件跟表格联动了，就出现了这个问题				      
                    that.showtable = false 
                    that.$nextTick(() => {
                        that.showtable = true
                        that.$nextTick(() => {
                            that.setSort()
                        })
                    })
                }
            })
        },