element ui 表格+sortablejs行拖拽排序

最新推荐文章于 2024-08-29 17:15:26 发布

qq_42560402

最新推荐文章于 2024-08-29 17:15:26 发布

阅读量232

点赞数

文章标签： elementui 排序

本文链接：https://blog.csdn.net/qq_42560402/article/details/118183635

版权

本文介绍了如何在Vue项目中结合ElementUI和SortableJS实现表格行的拖拽排序功能。首先通过npm安装SortableJS，然后在main.js或具体组件中引入并挂载到Vue原型上。在组件的mounted方法中初始化Sortable，并在onEnd事件中处理排序更新，确保数据同步。特别地，对于存在联动问题的情况，通过控制界面重新渲染来解决排序混乱的问题。

摘要由CSDN通过智能技术生成

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()
                        })
                    })
                }
            })
        },