组件el-scrollbar的使用

亲测有效！！！
原链接：组件el-scrollbar的使用

使用总结：很多结论都说要给el-srollbar添加一个指定的高度，搞了半天，它下面老是出现原生的水平滚动条，真烦，最后参照上面博主的链接，才没问题了。
应该是：el-scrollbar应该要包裹需要添加滚动条的元素，被包裹的直接的元素的里面的内容如果超出了被包裹元素的高度，那么就会出现垂直滚动条。
水平滚动条出现与否由el-scrollbar的宽度和被包裹的直接元素的宽度决定。并且如果要让水平滚动条展示，需要添加 .is-horizontal {display: block; } 这个 样式。

<template>
    <div>
        <el-scrollbar class="scrollbar">
            <div class="box">
                <ul>
                    <li v-for="item in 100">{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}{
   { item }}</li>
                </ul>
            </div>
        </el-scrollbar>
    </div>
</template>



<script>

</script>

<style>
    .box {
        height: 200px;
    }
    .scrollbar {
        width: 200px;
    }

    .is-horizontal {
        display: block;
    }

    /deep/ .is-horizontal {
        display: none;
    }

</style>

结合el-table使用示例
效果

下面故意复制了多列，
使用了box盒子去套住这个表格，并且设置box盒子的高度(目的就是为了得到垂直滚动条，因为表格的数据垒积的高度大于box的高度时，由于el-scrollbar的存在，就会产生垂直方向的滚动条，但是这个时候，水平方向的滚动条还没有出现。)。
设置box的宽度为1200px(因为 (180 + 180 + 240 )*2 = 1200)，并且将el-scrollbar的宽度设置为300，这样el-scrollbar的宽度就小于了box的宽度，就会产生水平滚动条

<template>
    <div>
        <div class="wrapper">
            <el-scrollbar class="scrollbar">
                <div class="box">
                    <el-table
                            class="table1"
                            :data="tableData">
                        <el-table-column
                                prop="date"
                                label="日期"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                width="240"
                                label="地址">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="日期"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                width="240"
                                label="地址">
                        </el-table-column>
                    </el-table>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    }
</script>

<style>

    .box {
        height: 300px;
        width: 1200px;
    }


    .scrollbar {
        width: 300px;
    }

    .is-horizontal {
        display: block;
    }

    .wrapper {
        width: 300px;
        border: 1px solid red;
        margin: 20px auto;
    }

</style>