vue upload 附件列表排序

在Vue Upload中，可以通过对附件列表进行排序来实现。根据提供的代码引用，附件列表是通过v-for指令渲染的，即v-for="(item, index) in form.mainPic"。如果想要对附件列表进行排序，可以在data属性中添加一个新的数组变量，将form.mainPic的数据复制到这个新的数组中，然后对这个新数组进行排序。在模板中，使用这个新数组进行渲染。例如：

<div v-for="(item, index) in sortedMainPic" :key="index" class="small-img" v-show="sortedMainPic.length <= 5">
    <img :src="`${ip}${item}`" width="100%" height="100%" />
    <i class="el-icon-delete-solid img-delbtn" @click="delImg(index)"></i>
</div>

在Vue实例的data属性中，添加sortedMainPic数组和一个排序方法：

data() {
  return {
    form: {
      mainPic: [], // 附件列表
    },
    sortedMainPic: [], // 排序后的附件列表
  };
},
methods: {
  // 在需要的时候调用此方法，对sortedMainPic进行排序
  sortMainPic() {
    this.sortedMainPic = [...this.form.mainPic].sort();
  },
  // 其他方法...
},

通过调用sortMainPic方法，可以对附件列表进行排序。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue-components封装组件](https://blog.csdn.net/weixin_58099903/article/details/124533490)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue中使用sortable插件实现拖拽 upload上传图片改变顺序](https://blog.csdn.net/qq_48930299/article/details/118020510)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]