在vue elementui el-dialog中使用sortablejs时遇到的问题

lanlanlikestudy

已于 2024-05-15 18:14:02 修改

阅读量266

点赞数 1

于 2024-02-23 14:12:37 首次发布

本文链接：https://blog.csdn.net/m0_58774700/article/details/136254837

版权

本文介绍了Vue中由于渲染机制导致对话框dialog在页面加载后不会立即显示，需点击后触发。作者提供了在点击事件后使用$nextTick和Sortable库实现列表拖拽排序的示例，强调避免在mounted钩子中直接操作，应在适当时机如点击事件后执行相关方法。

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

因为vue的渲染机制，加载完组件后dialog不会立即被渲染，只有当我们点击弹框后dialog才会被渲染，废话少说，上干货：

<!-- 以下只是片段代码，内容仅供参考： -->
<el-dialog :title="$t('message.home.ed')" :visible.sync="dialogEDVisible" width="420px">
            <div class="dialog-ed">
                <div class="dialog-ed-title">
                    {{ $t("message.home.title") }}
                    <div>{{ dialogData.name }}</div>
                </div>
                <div class="dialog-ed-content">
                    <div class="dialog-ed-content-acc">{{ $t("message.home.acc") }}</div>
                    <div class="dialog-ed-content-accex">{{ $t("message.home.accex") }}</div>
                </div>
                <div class="dialog-ed-list" ref="dialogEdList">
                    <div class="dialog-ed-list-item" v-for="item in dialogInfo">

拖拽方法

sortDrag() {
            this.$nextTick(() => {
                let self = this;
                const el = this.$refs.dialogEdList;  
                console.log(el)
                new Sortable(el, {
                    animation: 150,
                    draggable: '.dialog-ed-list-item', // 要拖动的目标
                    onStart() { },
                    onEnd(evt) {
                        console.log(evt)
                        // 对数组排序进行调整
                        self.dialogInfo.splice(evt.newIndex, 0, self.dialogInfo.splice(evt.oldIndex, 1)[0])
                        let newArray = self.dialogInfo.slice(0)
                        self.dialogInfo = []
                        self.$nextTick(() => {
                            self.dialogInfo = newArray
                            // 发送保存API请求
                        })
                    }
                })
            });
        }

引用：不要在mounted钩子中直接调用方法，在点击弹框后再调用该方法

<div class="header-left-top" @click="onClickTitle">
                <span>{{ selectDialog.content }}</span>
            </div>

onClickTitle() {
            this.dialogEDVisible = true;
            this.$nextTick(function () {
                this.sortDrag();
            });
        },