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

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

一、安装使用Sortable.js

1、安装

cnpm install sortablejs --save

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

<script>
    import Sortable from 'sortablejs'
    export default{
        .........
        data() {
            return {
                accessoryList : [1,2,3,4,5,6,7,8,9]
            }
        }
        .........
    }
</script>

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

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

<div id="sortAble">
    <p v-for="(item, index) in accessoryList " :key="'' + index">{{item}}</p>
</div>

说明： 至此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、解决：使用组件将全屏弹窗写到一个单独组件内，如下：

<template>
    <el-dialog
            v-if="fileManage"
            custom-class="oaDialog"
            :visible.sync="fileManage"
            append-to-body
            width="100%">
        </div>
        <div id="sortAble">
            <p v-for="(item, index) in accessoryList " :key="'' + index">{{item}}</p>
        </div>
    </el-dialog>
</template>

<script>
    import Sortable from 'sortablejs'
    export default {
        name: 'FileManage',
        data() {
            return {
                fileManage: false,
                accessoryList : [1,2,3,4,5,6,7,8,9]
            }
        },
        methods: {
            init () {
                this.fileManage = true
                this.$nextTick(() => {
                    // Sortable.create(document.getElementById('sortAble'), {animation: 150})
                    this.rowDrop()
                })
            },
            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
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

3、父组件中使用

<template>
    <FileManage ref="FileManage"></FileManage>
</template>

<script>
import FileManage from './FileManage'
export default {
        .....
    methods: {
          open() {
                this.$refs.FileManage.init()
            }
    }
}
</script>

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

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