vue获取循环列表并添加图片

最新推荐文章于 2024-10-02 20:28:37 发布

岩崎理奈

最新推荐文章于 2024-10-02 20:28:37 发布

阅读量5.2k

点赞数

分类专栏： vue笔记

本文链接：https://blog.youkuaiyun.com/qq_41874847/article/details/88988046

版权

vue笔记专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在Vue项目中，针对循环列表实现单选功能，并在选中后获取对应的客户资料ID及显示名称。通过调用详情接口获取name并存储在数组materialDetail中，同时处理图片添加，确保每个列表项可以独立添加单张或多张图片，通过设置布尔值控制不同上传方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为我要实现的是选中之后，获取列表里面之前客户填入的资料信息

这个信息是根据id获取显示的，所以我将单选时获取资料id

因为要把资料id的name显示出来所以我通过调详情的接口将对应的资料name获取到添加定义的数组materialDetail内并在方法后设置清空，不然用户单选后再换的话就会累积添加。最后再通过表格显示出来

但同时要能添加图片，所以我加了一个item.url，这样才能与数据对应，因为是循环的列表，如果只是写一个添加图片的组件在这里就会一添加，所有的图片都是一样的，但同时我可以选择单张和多张，如果直接加按钮也是同样一点击全部都一样了，所以我再materialDetail内添加了两个布尔值，设置值为false,设置方法点击上传单张时将index获取到设置this.materialDetail[index].img=true this.materialDetail[index].file=false 另外一个按钮同理

单选点击后获取显示的效果图

（图1是点击上传单张图片后的效果）

（图2是点击上传文件后的效果）

(只把相关的代码复制到这了)

<template>
<div>
<table class="table" >
      <tr class="th-checkbox">
        <th>
        </th>
        <th>产品名称</th>
        <th style="width: 25px">利息</th>
        <th>期限</th>
        <th>申请人</th>
        <th>创建时间</th>
        <th>产品ID</th>
        <th>分类</th>
      </tr>

      <tr v-for="item in pagination">
        <td>
          <input type="radio" class="checkbox" :value="item.id" @click="checked(item.id,$event)" v-model="myCehck"></input>
        </td>
        <td>{{item.name}}</td>
        <td>{{item.interestRate}}%{{item.interestType == 'month' ? '月息':item.interestType == 'year'?'年化':item.interestType}}
          <input type="button" style="color:#ff5733;height: 25px;line-height: 25px" :value="item.repayType == 'together_corpus_interest' ? '到期还本付息':item.repayType == 'interest_first' ? '先息后本':'等本等息'"></input>
        </td>
        <td>{{item.limitTime}}</td>
        <td>{{item.submitUserName}}</td>
        <td>{{item.createdAt|format}}</td>
        <td>{{item.id}}</td>
        <td>{{item.productTypeName}}</td>
      </tr>
    </table>
 <table class="table"  style="border: 1px solid #c3c3c3 " cellspacing="0" cellpadding="0">
          <tr class="list" v-for="(item,index) in materialDetail">
            <td>{{index+1}}.{{item.name}}</td>
            <td style="padding: 10px">
              <Button type="success" @click="imgClick(index)" style="margin: 20px">上传单张图片</Button>
              <Button type="primary" @click="fileClick(index)">上传文件</Button>
              <div style="float: left" v-show="item.img" v-model="item.img">
                <app-upload-img :imgName.sync="item.url" ></app-upload-img>
              </div>
              <div style="float: left" v-show="item.file" v-model="item.file">
                <app-upload-file :fileName.sync="item.url" style="float: left;margin: 20px"></app-upload-file>
              </div>
              <!--</div>-->
              <!--<div style="float: left">-->
                <!--<app-upload-img :imgName.sync="item.url" ></app-upload-img>-->
              <!--</div>-->
             </td>
            <td></td>
          </tr>
        </table>
<div>
</template>
<script>
  import ApiClient from "@/api/ApiClient";
  import AppUploadFile from '@/components/AppUploadFile'
  import AppUploadImg from '@/components/AppUploadImg'
  import imgMagnifying from '@/components/imgMagnifying'
  import uploadImg from '@/components/uploadImg'
  export default {
    name: 'businessApplication',
    inject:['reload'],
    components:{AppUploadImg,imgMagnifying,uploadImg,AppUploadFile},
    data(){
      return{
        myCehck:[],
        list:{
          productId:null,
          name:'',
          productTypeId:null,
          state:'',
          page:1,
          size:10
        },
        productDetail ：{}，
        productMaterials:{},
        materialDetail:[],
        materialDetail1:[],
        projectId:null
      }
    },
    methods:{
      checked(id,e){
        if (e.target.checked) { // 判定checkbox的勾选状态
          this.productShow = true
        }
        this.projectId = id
        ApiClient.get(`/backend/product/${id}/detail.do`,this.list).then(data => {
          this.productDetail = data
          this.productMaterials =data.productMaterials
          for (var i=0;i<data.productMaterials.length;i++) {
            this.materialDetail.push({id:data.productMaterials[i].id,name:data.productMaterials[i].name,img:false,file:false})
          }
        this.materialDetail=[]
      },
    
      addBusiness(name){
        var materialUrl;
        for (var i=0;i<this.materialDetail.length;i++) {
          if(this.materialDetail[i].url!==undefined){
            this.materialDetail1.push({id:null,materialId:this.materialDetail[i].id,url:this.materialDetail[i].url})
            materialUrl=this.materialDetail[i].url
          }
        }
        this.businessAdd.businessMaterialDetailDtos=this.materialDetail1
          this.$refs[name].validate((valid) => {
            if (valid) {
              if(materialUrl==undefined || materialUrl==''){
                this.$Message.error('请提供材料');
              }else{
                ApiClient.post('/backend/business/add.do', this.businessAdd).then(() => {
                 this.reload()
                });
              }
            }else{
              this.$Message.error('请完善信息');
              return false;
            }
          })
      },
      imgClick(index){
        this.materialDetail[index].img=true
        this.materialDetail[index].file=false
      },
      fileClick(index){
        this.materialDetail[index].file=true
        this.materialDetail[index].img=false
      },
    },
  }
</script>