Element组件库踩过的坑（持续更新...）

(ps:仅以此文记录项目中使用过的element组件经验及某些坑。Let‘s beigin...)

• el-select 选择框

<!-- 选项数据是固定写死的  -->
<el-select v-model="position" placeholder="位置" @change="change">
        <el-option label="首页" value='1'></el-option>
        <el-option label="发现" value='2'></el-option>
        <el-option label="我的" value='3' :disabled=true></el-option>
</el-select>

<!-- 选项数据由接口提供，循环创建  -->
<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:'发现'},
            {id: 3, name:'我的'},
        ],
        position: 2, // 这个字段名跟v-model绑定的是同一个，会自动选择与:value中对应相同的值
    }
  },
  methods: {
     change(value) {
         // 这里的值默认是当前选择:value中的值，可在这个方法里处理相应逻辑
         console.log(value)
     },
    clickedSeletion() {
        // 只要点击了选择框就会触发
    }
  }
}
</script>

el-select的@change方法，默认只能传:value的值，那如何传自定义参数呢？

<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) {}方法中可直接打印出两个参数。

• 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 {
        // 图片列表，组件规定一定要按照 name、url的字段名来
        fileList: [
            {"name":"", "url":""},
            {"name":"", "url":""}
        ],
    }
  },
  methods: {
      // 上传文件之前的函数
      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

handleSucce这个钩子函数里带的fileList并不是我们在data中定义的fileList。在视觉效果上上传成功后组件会自动更新UI，但最后提交数据时，this.fileList并没有更新数据，需要我们手动添加。

另外，添加文件数据时，文件的url值一定要取file.response.result。因为直接存file.url的时候，这个值时好时坏，有时是以http:开头的(正确的地址)，也可能是以blob:开头的地址。（如果有大神知道原因，望告知。）

同理，在handleRemove这个钩子函数也会存在这个问题。文件删除之后一定要记得手动更新this.fileList。另外，对于被删除图片的url，这里需要加一层判断。

同样打印的都是被删除的那张图片，返回的对象数据并不一样，一个含有response，一个不含。而含有response字段的，url的值就是blob:开头的，最后取值要以response.result为准。不含有response字段的数据中，url的值就可以直接拿来用。（如果有大神知道原因，望告知。）

Part 2

在beforeImgUpload这个钩子函数中，return false 后有时会自动触发handleRemove这个函数，导致图片被误删。需要加以判断，代码如下。

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

• el-input 和 el-select 宽度不一致的问题

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