[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重新渲染，这样列数据肯定是重新循环的。