Vue中使用elementui与Sortable.js实现列表拖动排序

本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码,供大家参考,具体内容如下

一、安装使用Sortable.js

1、安装

cnpm install sortablejs --save

2、在需要的vue页面单独引入

3、在生命周期mounted中注册事件以及在html中渲染数据

mounted() {
  //sortAble为要拖动的盒子dom
  Sortable.create(document.getElementById('sortAble'), {animation: 150})
 }
    

{{item}}

说明: 至此sortable.js已经可以看到拖动的效果了;

二、元数据不刷新问题

1、前面的只能是前端页面上看到数据,但是对于数据怎样拖动数组arrdata中的顺序仍旧未变,继续看:
只需要把mounted中的Sortable.create(document.getElementById('sortAble'), {animation: 150})这块换为以下代码即可:

rowDrop() {
   let that = this
    // eslint-disable-next-line no-unused-vars
    let sortable = new Sortable(document.getElementById('sortAble'), {
        sort: true,
        animation: 150,
        onEnd: function (evt) {
            that.accessoryList.splice(evt.newIndex, 0, that.accessoryList.splice(evt.oldIndex, 1)[0])
            let newArray = that.accessoryList.slice(0)
            that.accessoryList = []
            that.$nextTick(function () {
                that.accessoryList = newArray
            })
        }
    })
}

现在数组accessoryList就是改变顺序后的,即可提交至后台保存。

三、在elementUI中的弹窗中使用上述排序功能

说明:对于某些需求需要在el-dialog的全屏弹窗中使用,比如系统管理,就会发现拖动失效,甚至还有报错;
尝试使用下面方法解决

1、原因:el-dialog的dom加载顺序问题,查阅资料就能知道el-dialog的dom操作区是一个异步加载的机制,因此在mounted中不能调用该方法;
2、解决:使用组件将全屏弹窗写到一个单独组件内,如下:





3、父组件中使用

说明:这里利用了先加载dom完成后再调用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(Vue中使用elementui与Sortable.js实现列表拖动排序)