element-ui的el-upload组件上传图片组，超简单的实现拖拽换位置排序

最新推荐文章于 2024-09-25 11:14:23 发布

玛莉KK

最新推荐文章于 2024-09-25 11:14:23 发布

阅读量4.4k

点赞数

分类专栏： JS 文章标签： ui css 前端

本文链接：https://blog.csdn.net/jackeykk/article/details/121085267

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

el-upload 图片拖拽排序

看了很多篇文章，都要加七加八。或者不能用自带的图片删除功能甚至也不用自带的图片放大功能。

我这个方法，只适用于过渡使用一下，不适用全部人的需求。

我的图片组来自 products.photo
我的图片是products.photo取的。直接在下面加多一个排序form-item，用for循环把图片循环出来。点击拖拽排序里的图片就更改位置。

                  <el-form-item label="排序" :label-width="formLabelWidth">
                    <div v-for="(i, index) in products.photo" :key='index' v-dragging="{ item: i, list: products.photo, group: 'brand_list' }" class="preview-img">
                        <el-image style="width: 100px;  float: left;" :src="i.url"></el-image>
                    </div>
                  </el-form-item>

排序那里的样式可以自己修改下css会好看点

在这里插入图片描述