ElementUI之那些你不知道的事

128 阅读2分钟
  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-uploadref值如: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做出贡献的人,文章写的还有不懂的地方或者补充的地方欢迎讨论跟补充