组件el-scrollbar的使用

实际上是由view和wrap之间的大小比较来确定是否出现滚动条的，因为默认情况下，view的高度在没有设置的情况下，就是由内容区给撑开的，所以view的高度等于内容区的高度。通过试验发现，如果给view-style设置一个固定高度，那么当wrap的高度小于view这个固定高度，就出现了滚动条，所以这个滚动条存在的意义就是把view全部能看到

原链接：组件el-scrollbar的使用

注意1：el-scrollbar的class/css必须是全局样式，view内容中的样式会覆盖掉容器wrap的样式；

注意2：el-scrollbar本身class不能带padding，不然会出现容器内外两个滚动条。

el-scrollbar常用属性的理解

     props: {
        native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条
        wrapStyle: {},  // 包裹层自定义的样式
        wrapClass: {},  // 包裹层自定义的样式类
        viewClass: {},  // 可滚动部分自定义的样式类
        viewStyle: {},  // 可滚动部分自定义的样式
        noresize: Boolean, // 是否不监听container尺寸变化，如果 container 尺寸不会发生变化，最好设置它可以优化性能
        tag: { type: String, default: 'div' }  // 生成的标签类型，默认使用 `div`标签包裹
    }

结合el-table使用示例

效果

下面故意复制了多列，

1、

2、设置box的宽度为1200px(因为 (180 + 180 + 240 )*2 = 1200)，外部wrapper的宽度时300px，这样el-scrollbar占满整个的宽度300px，就小于了box的宽度，就会产生水平滚动条