Vue中使用elementui與Sortable.js實現列表拖動排序

2022-04-18 16:00:30

本文範例為大家分享了使用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完成後再呼叫

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Vue中使用elementui與Sortable.js實現列表拖動排序

一、安裝使用Sortable.js

二、後設資料不重新整理問題

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

熱門文章