element ui提供了成熟的元件場景，但實際工作中難免會遇到認（sha）真（diao）的產品。比如，最近遇到的，要求實現手動上傳特定格式檔案（使用者點選“上傳檔案”按鈕，確定之後，只是單純選擇了檔案，點選頁面上的“提交”按鈕才上傳），並展示使用者選擇的檔名稱，且只能選擇一個檔案，如果使用者選擇第2，3，4...等檔案，要求後者覆蓋前者，即使用者看到的總是最新選擇的檔案。

　　OK，需求合理，但是，查了查API，呃。。。貌似不太好完美實現。

　　查原始碼，改樣式。完美奉上解決方案。

一，實際應用場景

實現手動上傳特定格式的檔案，展示所選檔名稱，且能實現覆蓋上傳。

二，分析

1， 解決手動上傳問題

官網API（https://element.eleme.cn/#/zh-CN/component/upload），給出“手動上傳”，只需要在Upload元件新增 屬性:auto-upload="false" ，然後呼叫this.$refs.upload.submit(); 方法即可。

2，解決特定格式檔案問題

這塊，也有例子，對於本專案，要求新增csv格式， 所以，Upload元件新增 屬性accept=".csv"

3，最麻煩的是上傳限制問題

首先想到官網API裡的 limit屬性， Upload元件新增屬性:limit="1"，但是這樣，無聊怎麼選擇檔案，頁面上展示的始終是第一次選擇的檔案，這效果和我想的大相徑庭。

“單身限制了你的想象力”

繼續翻，看到file-list屬性，儲存的是使用者選擇的檔案陣列。

　　　　想通過on-change方法，改變file-list裡選擇的檔案列表，只保留最後一項。邏輯上來說行得通。

程式碼如下：

模板程式碼（已精簡）：

<template>
　　<div>
      <el-upload
         class="upload-demo"
         ref="upload"       // 注意1
         accept
 
=".csv"      // 注意2
         :file-list="fileList"  // 注意3
         :on-change="handleChange"  // 注意4
         :action="uploadUrl" 
         :show-file-list="true"
         :on-success="onSuccess"
         :on-error="onError"
         :auto-upload="false"  // 注意5
       >
         <el-button type="primary" slot="trigger">選取檔案</el-button>
       </el-upload>
       <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
</template>

script程式碼：

<script>
    export default {
        name: 'Upload',
        data() {
            fileList: [],
            uploadUrl: '', 
        },
　　　　 methods: {
      　　　 onSuccess(res) {
                this.$alert(res.data, '提示', {
                    confirmButtonText: '確定',
                    callback: action => {
                      console.log("上傳成功")
                    },
               })
            },
      　　　 onError(res) {
                this.$alert('建立失敗', '提示', {
                    confirmButtonText: '確定',
                    callback: action => {
                       console.log("上傳失敗")
                    },
                })
             },
             handleChange(file, fileList) {
                 if (fileList.length > 0) {
                     this.form.fileList = [fileList[fileList.length - 1]]  // 這一步，是 展示最後一次選擇的csv檔案
                 }
             },
      　　    submit() {<br data-filtered="filtered">                 this.uploadUrl = '/upload'  // 這裡，讀者換成實際專案中的上傳介面
                 this.$nextTick(() => {
                     this.$refs.upload.submit()
                 })
             },
         },
    }
</script>

到這裡，基本功能上實現了目標場景，但是有一個樣式問題，因為是認為改變file-list，取最後一項，因此，使用者選擇第二個檔案後，從第一個檔案到第二個檔案，有動態切換的效果，這不是我想要的，我想要的是 使用者點選“上傳檔案”，本地電腦 選擇檔案，點選“確定”，頁面上直接展示所選檔案，不要動態切換。

鼓搗很久（省略很多字），翻看element upload元件的css原始碼。

去掉這一部分動畫，完美解決。

css程式碼如下：

<style lang="scss" scoped>
    .upload-demo {
      display: flex;
    }
    /deep/ .el-list-enter-active,
    /deep/ .el-list-leave-active {
      transition: none;
    }
 
    /deep/ .el-list-enter,
    /deep/ .el-list-leave-active {
      opacity: 0;
    }
    /deep/ .el-upload-list {
      height: 40px;
    }
</style>

至於css中的 /deep/ 是幹嘛的，其實是修改elementui等第三方元件內部樣式，做的滲透。如果不用scss， 可以使用 >>> 符號來修改第三方元件內部樣式。

摘抄自：https://www.cnblogs.com/lovemomo/p/11777608.html