element 后台管理系统上传图片循环添加radio单选框

最新推荐文章于 2024-05-25 09:37:31 发布

ratel️

最新推荐文章于 2024-05-25 09:37:31 发布

阅读量1.2k

点赞数 2

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/cjy_fly/article/details/121853061

版权

<el-col :span="24">
          <el-form-item label="图片:">
            <el-upload
              class="upload-demo"
              :action="上传的地址"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :file-list="fileList"
              list-type="picture"
              :headers="headers"
            >
              <div
                slot="file"
                slot-scope="{file}"
              >
                <img
                  :src="file.url"
                  alt=""
                  class="el-upload-list__item-thumbnail"
                >
                <span class="listname">{{ file.name }}</span>
                <i
                  slot="default"
                  class="el-icon-delete"
                  style="position:absolute;top:33px;right:150px;"
                  @click="handleRemove(file)"
                />
                <span class="el-upload-list__item-actions">
                  <el-radio-group
                    v-model="basic.zhuImg"
                    class="listradio"
                    @change="abcd(file)"
                  >
                    <el-radio :label="file.name">设为主图</el-radio>
                  </el-radio-group>
                </span>
              </div>
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >只能上传jpg/png文件,且不超过500kb,大小800x800,最多上传9张</div>
            </el-upload>
          </el-form-item>
        </el-col>

注解: