摘要

本文主要摘录饿了么控件使用的时候，一些常见的使用问题

bug列表

控件的值无法选中或者无法获取其值

绝大多数情况，是因为绑定的数据没有了，为undefined或者null

菜单menu-item的部分无法阻止默认事件

el-upload上传控件重置选择的文件

官方提供了这个清空的方法，但是由于refs选择不到对应的导致方法失效
this.$refs.upload.clearFiles()
所以建议使用第二种方案，用数组进行数据绑定，然后需要重置的时候数组重置为空即可。
:fileList="fileList" this.fileList = []

1.4版本时间控件默认的model返回值不对

其默认返回的格式是：gmt的格式

  1. Fri Sep 22 2017 00:00:00 GMT+0800 (中国标准时间)

而我们需要的标准的字符串格式，可以通过官方的change事件来改变其绑定的model值修复这个问题。

  1. @change="getSTime" methods:{
  2.   // 这里的值是你需要的     
  3.   getSTime(val){   
  4.     this.time = val    
  5.   }
  6. }

el-table列无法根据列数据进行更新循环列


场景：在封装自己的表格时，可以将列数据进行动态的传入，包括了列的名称，使用数据的id，以及需要的宽度，这样就不用每次使用的时候定义很多列，但是el-table的列循环无法根据动态的列进行重新渲染，表现的结果是新的列只匹配了上次列数据中存有的字段。

  1. // 列循环数据
  2. <el-table-column v-for="(item) in columns" :key="item.id" :prop="item.id" :label="item.value" 
  3.  :show-overflow-tooltip="!editStatus || !editColumns.includes(item.id)" :showOverflowTooltip='!editStatus || !editColumns.includes(item.id)' :width="item.width" >
  4. </el-table>
  5. // 列数据枚举
  6. columns: [
  7.     {id:  'keywordAddress',
  8.     value:  '房源地址',
  9.     width:  '300' },
  10.     { id:  'overdueDay',
  11.     value:  '逾期天数',
  12.     width:  '150'  },
  13.     {  id:  'memo',
  14.     value:  '备注',
  15.     width:  null}
  16. ]

原因分析：组件的列数据在传入一次之后，不会重新检查变化的列，只会检查变化的传入数据。
解决方案：
第一种：将所有的列字段枚举封装到一个对象里，然后v-if控制需要渲染的列el-table-column 。
第二种：重新渲染整个组件，也就是每次el-table，都用v-if重新渲染，这样列数据肯定是重新循环的。
若有收获，就点个赞吧