(ps:僅以此文記錄項目中使用過的element組件經驗及某些坑。Let‘s beigin...)

• el-select 選擇框

<!-- 選項數(shù)據(jù)是固定寫死的  -->
<el-select v-model="position" placeholder="位置" @change="change">
        <el-option label="首頁" value='1'></el-option>
        <el-option label="發(fā)現(xiàn)" value='2'></el-option>
        <el-option label="我的" value='3' :disabled=true></el-option>
</el-select>

<!-- 選項數(shù)據(jù)由接口提供，循環(huán)創(chuàng)建  -->
<el-select v-model="position" placeholder="請選擇" 
           @change='change' 
           @visible-change="clickedSeletion">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
 </el-select>

<script>
export default {
  data() {
    return {
        options: [
            {id: 1, name:'首頁'},
            {id: 2, name:'發(fā)現(xiàn)'},
            {id: 3, name:'我的'},
        ],
        position: 2, // 這個字段名跟v-model綁定的是同一個，會自動選擇與:value中對應相同的值
    }
  },
  methods: {
     change(value) {
         // 這里的值默認是當前選擇:value中的值，可在這個方法里處理相應邏輯
         console.log(value)
     },
    clickedSeletion() {
        // 只要點擊了選擇框就會觸發(fā)
    }
  }
}
</script>

el-select的@change方法，默認只能傳:value的值，那如何傳自定義參數(shù)呢？

<div v-for="(item,index) in details">
   <el-select v-model="item.articleTitle" placeholder="" @change="(val)=>selected(val,item)">
      <el-option
          v-for="ele in articleList"
          :key="ele.id"
          :label="ele.articleTitle"
          :value="ele.id">
       </el-option>                                            
    </el-select>
</div>

屆時selected(val, item) {}方法中可直接打印出兩個參數(shù)。

• el-upload 上傳

<el-upload
  class="upload-demo"
  action="后端上傳文件接口"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :before-upload="beforeImgUpload"
  :file-list="fileList"
  name="upfile"  // 上傳的文件字段名 默認是file 記得跟后端保持一致
  list-type="picture">
  <el-button size="small" type="primary">選擇上傳圖片</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png格式文件，文件不能超過2M</div>
</el-upload>

<script>
export default {
  data() {
    return {
        // 圖片列表，組件規(guī)定一定要按照 name、url的字段名來
        fileList: [
            {"name":"", "url":""},
            {"name":"", "url":""}
        ],
    }
  },
  methods: {
      // 上傳文件之前的函數(shù)
      beforeImgUpload() {
         // 限制文件格式和大小
         const isJPG_PNG = file.type == ('image/jpeg' || 'image/png');
         const isLt2M = file.size / 1024 / 1024 < 2;
         if (!isJPG_PNG) {
             this.$message.error('上傳圖片格式錯誤');
         }
         if (!isLt2M) {
             this.$message.error('圖片大小不能超過2M');
         }
         return isJPG_PNG && isLt2M;
     }
  }
}
</script>

坑點來了......

Part 1

另外，添加文件數(shù)據(jù)時，文件的url值一定要取file.response.result。因為直接存file.url的時候，這個值時好時壞，有時是以http:開頭的(正確的地址)，也可能是以blob:開頭的地址。（如果有大神知道原因，望告知。）

同理，在handleRemove這個鉤子函數(shù)也會存在這個問題。文件刪除之后一定要記得手動更新this.fileList。另外，對于被刪除圖片的url，這里需要加一層判斷。

同樣打印的都是被刪除的那張圖片，返回的對象數(shù)據(jù)并不一樣，一個含有response，一個不含。而含有response字段的，url的值就是blob:開頭的，最后取值要以response.result為準。不含有response字段的數(shù)據(jù)中，url的值就可以直接拿來用。（如果有大神知道原因，望告知。）

Part 2

在beforeImgUpload這個鉤子函數(shù)中，return false 后有時會自動觸發(fā)handleRemove這個函數(shù)，導致圖片被誤刪。需要加以判斷，代碼如下。

handleRemove(file, fileList) {
   if (file && file.status==="success") {
        // 處理刪除操作
   }         
}

• el-input 和 el-select 寬度不一致的問題

.el-form-item .el-select {
   width:100%;
}