背景：elementui中的上传组件想限制，只上传一张图片，文档里面有一个limit属性可控制最大允许上传的个数，但是上传了一张之后仍然有继续上传的操作
解决办法：上传一张成功之后，通过样式控制上传按钮的隐藏，删除上传的文件之后，再让上传按钮出现
主要代码：:class="{ hide: item.hideUpload }"

定义变量hideUpload控制显示与隐藏

  let formDatas = $ref({
    dataList: [
      {
        busType: '1', // 1收银台整体背景
        name: '收银台整体背景',
        fileId: '',
        fileName: '',
        fileList: [],
        hideUpload: false,
      },
      {
        busType: '2', // 2产品信息背景
        name: '产品信息背景',
        fileId: '',
        fileName: '',
        fileList: [],
        hideUpload: false,
      },
      {
        busType: '3', // 3支付方式背景
        name: '支付方式背景',
        fileId: '',
        fileName: '',
        fileList: [],
        hideUpload: false,
      },
      {
        busType: '4', // 4价格选中背景
        name: '价格选中背景',
        fileId: '',
        fileName: '',
        fileList: [],
        hideUpload: false,
      },
      {
        busType: '5', // 5价格背景
        name: '价格背景',
        fileId: '',
        fileName: '',
        fileList: [],
        hideUpload: false,
      },
    ],
  })

在上传和删除回调方法中控制变量

  // 上传
  const handleImport = async (file, type) => {
    try {
      const params = new FormData()
      params.append('file', file.file)
      let res = await fileUpload(params)
      formDatas.dataList.map((item) => {
        if (item.busType == type) {
          item.hideUpload = true // 隐藏上传按钮
          item.fileId = res.fileId
          item.fileName = res.fileName
        }
      })
    } catch (error) {
      console.log(error)
      proxy.$modal.msgError('上传失败')
    }
  }
// 删除方法
  const handleRemove = (file) => {
    console.log(file)
    formDatas.dataList.map((item) => {
      if (item.fileList[0]&&item.fileList[0].uid == file.uid) {
        item.fileList = []
        item.fileId = ''
        item.fileName = ''
        item.hideUpload = false // 显示上传按钮
      }
    })
  }

html代码：

  <!-- 收银台背景 -->
    <el-form
      ref="formRef"
      :model="formDatas"
      label-width="120px"
      :rules="formRules"
    >
      <el-row :gutter="20">
        <el-col
          :span="8"
          v-for="(item, index) in formDatas.dataList"
          :key="index"
        >
          <el-form-item
            :label="item.name"
            :prop="'dataList.' + index + '.fileList'"
            :rules="formRules.fileList"
          >
            <el-upload
              style="width: 200px"
              :class="{ hide: item.hideUpload }"
              ref="imgUploadRef"
              action=""
              :limit="1"
              v-model:file-list="item.fileList"
              list-type="picture-card"
              accept=".jpg,.png,.jpeg"
              :http-request="(params) => handleImport(params, index + 1)"
              :headers="headers"
              :before-upload="imgBeforeAvatarUpload"
            >
              <template #file="{ file }">
                <div>
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

样式部分：

  :deep(.hide .el-upload--picture-card) {
    display: none;
  }