[TOC] ## 摘要 本文主要摘錄餓了么控件使用的時候，一些常見的使用問題 ## bug列表 ### 控件的值無法選中或者無法獲取其值 絕大多數情況，是因為綁定的數據沒有了，為undefined或者null ### 菜單menu-item的部分無法阻止默認事件 ### el-upload上傳控件重置選擇的文件 官方提供了這個清空的方法，但是由于refs選擇不到對應的導致方法失效 `this.$refs.upload.clearFiles()` 所以建議使用第二種方案，用數組進行數據綁定，然后需要重置的時候數組重置為空即可。 `:fileList="fileList" this.fileList = []` ### 1.4版本時間控件默認的model返回值不對 其默認返回的格式是：gmt的格式 ~~~ Fri Sep 22 2017 00:00:00 GMT+0800 (中國標準時間) ~~~ 而我們需要的標準的字符串格式，可以通過官方的change事件來改變其綁定的model值修復這個問題。 ~~~ @change="getSTime" methods:{ // 這里的值是你需要的 getSTime(val){ this.time = val } } ~~~ ### el-table列無法根據列數據進行更新循環列 場景：在封裝自己的表格時，可以將列數據進行動態的傳入，包括了列的名稱，使用數據的id，以及需要的寬度，這樣就不用每次使用的時候定義很多列，但是el-table的列循環無法根據動態的列進行重新渲染，表現的結果是新的列只匹配了上次列數據中存有的字段。 ``` // 列循環數據 <el-table-column v-for="(item) in columns" :key="item.id" :prop="item.id" :label="item.value" :show-overflow-tooltip="!editStatus || !editColumns.includes(item.id)" :showOverflowTooltip='!editStatus || !editColumns.includes(item.id)' :width="item.width" > </el-table> // 列數據枚舉 columns: [ {id: 'keywordAddress', value: '房源地址', width: '300' }, { id: 'overdueDay', value: '逾期天數', width: '150' }, { id: 'memo', value: '備注', width: null} ] ``` 原因分析：組件的列數據在傳入一次之后，不會重新檢查變化的列，只會檢查變化的傳入數據。 解決方案： 第一種：將所有的列字段枚舉封裝到一個對象里，然后v-if控制需要渲染的列el-table-column 。 第二種：重新渲染整個組件，也就是每次el-table，都用v-if重新渲染，這樣列數據肯定是重新循環的。