​ 在使用 Element UI 的 el-upload 组件时,如果你希望去掉文件列表的显示(即不显示已上传或待上传的文件列表),你可以通过几种方式来实现这个需求。然而,el-upload 组件本身并没有直接提供一个属性来简单地隐藏文件列表。不过,你可以通过一些技巧来达到这个目的。

# 方法一:使用 CSS 隐藏

最直接的方式是通过 CSS 来隐藏文件列表。由于 el-upload 组件的文件列表通常是通过内部的一个类名(如 .el-upload-list)来控制的,你可以通过为这个类添加 CSS 规则来隐藏它。

/* 隐藏文件列表 */
.el-upload-list {
  display: none !important; /* 使用!important 以确保覆盖所有可能的样式 */
}

注意,这种方法可能会影响到所有使用 el-upload 组件的实例,如果你只想隐藏特定实例的文件列表,可能需要为该实例添加一个特定的类名或 ID,并在 CSS 规则中指定它。

# 方法二:自定义插槽

另一种方法是使用 el-upload 组件的自定义插槽(slot)功能。但是,直接通过插槽来完全隐藏文件列表可能不太直接,因为插槽主要是用来自定义上传按钮或文件列表中的某些元素。不过,你可以通过自定义一个空的模板来 “替换” 掉文件列表的显示。

然而,el-upload 并没有直接提供一个插槽来替换整个文件列表。但是,你可以通过监听上传事件(如 on-success、on-remove 等)来手动管理一个外部的文件列表显示,然后在不需要显示文件列表时,将这个外部列表隐藏或清空。

# 方法三:不使用文件列表

如果你实际上并不需要文件列表的任何功能(比如重命名、删除等),你可以考虑不使用 el-upload 组件的文件列表特性。你可以通过设置 list-type 属性为 none(如果 Element UI 支持的话,但实际上它可能只支持 text 或 picture 等),但这通常只是改变文件列表的显示方式,而不是完全隐藏它。

更直接的方法是只使用 el-upload 的触发上传按钮部分,并在按钮的点击事件或 before-upload 钩子中处理文件上传的逻辑。这样,你就可以完全控制上传流程,而不必担心文件列表的显示。

# 方法四:事件删除

<template>
    <el-upload
        ref="upload"
        action="/api/upload"
        :limit="1"
        accept='.xlsx'
        :on-success="uploadSuccess"
        :on-error="uploadError"
    >
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
</template>
<script>
export default {
	methods: {
	  // 文件上传事件
      uploadSuccess(res) {
        this.$refs.upload.clearFiles(); // 去掉文件列表
      },
      uploadError(res){
        console.log(res);
        this.$refs.upload.clearFiles(); // 去掉文件列表
      }
	}
}
</script>