ElementUI之那些你不知道的事

1. 内置了滚动条组件el-scrollbar

简单使用方法

 // 需要设置el-scrollbar父元素标签的固定高度(不能使用calc)和overflow: hidden
 // 需要设置scrollbar自身的height: 100%
 <div style="height: 100px;overflow: hidden;">
     <el-scrollbar style="height: 100%">
     <!-- content -->
     </el-scrollbar>
 </div>
 <!-- style -->
 // 一般不需要x轴的滚动条所以需要手动设置scrollbar的overflow-x: hidden，这里不要设置全局样式，会引起Select组件的下拉高度不准确的bug
 /deep/.el-scrollbar__wrap {
     overflow-x: hidden;
 }

2. 上传组件Upload的批量上传其实是多次调用接口达到批量上传

解决批量上传只走一次接口（例子给的是手动上传的解决方法）

• 设置el-upload的ref值如：upload，关闭自动上传:auto-upload="false"
• 点击上传按钮通过this.$refs.upload.uploadFiles获取待上传的文件然后进行数据处理，关键代码如下：

  const fileList = this.$refs.upload.uploadFiles
  const formDatas = new FormData()
  fileList.forEach(item => {
      formDatas.append('files', item.raw)
  })
  <!-- 这里设置了全局的Vue.prototype.axios，所以这样写 -->
  this.axios({
      method: 'POST',
      url: '', // 接口路径
      headers: {
          'Content-Type': 'multipart/form-data',
      },
      data: formDatas,
  })
  

• 上传后记得使用this.$refs.upload.clearFiles()清理掉待上传的文件，一是避免第二次上传上传了之前的文件数据，二是可以垃圾回收释放内存

3. 选择器组件Select等类型组件的下拉弹出的层级z-index值和弹窗的遮罩层的z-index值用的是同一套逻辑从2000开始每点击一次递增，会导致在弹窗里面使用el-select下拉框可能不出现的bug

4. 滑块组件Slider设置width: 100%，拖动的小圆球按钮会导致父元素出现横向滚动条

5. 日期选择器组件DatePicker源码中有做showWeekNumber显示周数的功能，但是不知道为什么没有进行下去，想实现显示周数功能的可以参考这篇文章

6. 分页组件Pagination可以通过传align值'left' | 'center' | 'right'设置页码的居左、中、右对齐方式

注：文章是对使用ElementUI文档之外小技巧的一个记录,非常感谢ElementUI团队以及提出自己PR做出贡献的人,文章写的还有不懂的地方或者补充的地方欢迎讨论跟补充