Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序

更新時(shí)間：2022年04月18日 17:16:15 作者：_yangyi

這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序的具體代碼，供大家參考，具體內(nèi)容如下

一、安裝使用Sortable.js

1、安裝

cnpm install sortablejs --save

2、在需要的vue頁(yè)面單獨(dú)引入

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

3、在生命周期mounted中注冊(cè)事件以及在html中渲染數(shù)據(jù)

mounted() {
? //sortAble為要拖動(dòng)的盒子dom
? Sortable.create(document.getElementById('sortAble'), {animation: 150})
?}

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

說(shuō)明：至此sortable.js已經(jīng)可以看到拖動(dòng)的效果了；

二、元數(shù)據(jù)不刷新問(wèn)題

1、前面的只能是前端頁(yè)面上看到數(shù)據(jù)，但是對(duì)于數(shù)據(jù)怎樣拖動(dòng)數(shù)組arrdata中的順序仍舊未變，繼續(xù)看：
只需要把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
? ? ? ? ? ? })
? ? ? ? }
? ? })
}

現(xiàn)在數(shù)組accessoryList就是改變順序后的，即可提交至后臺(tái)保存。

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

說(shuō)明：對(duì)于某些需求需要在el-dialog的全屏彈窗中使用，比如系統(tǒng)管理，就會(huì)發(fā)現(xiàn)拖動(dòng)失效，甚至還有報(bào)錯(cuò)；
嘗試使用下面方法解決

1、原因：el-dialog的dom加載順序問(wèn)題，查閱資料就能知道el-dialog的dom操作區(qū)是一個(gè)異步加載的機(jī)制，因此在mounted中不能調(diào)用該方法；
2、解決：使用組件將全屏彈窗寫到一個(gè)單獨(dú)組件內(nèi)，如下：

<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>

說(shuō)明：這里利用了先加載dom完成后再調(diào)用

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: