Use of component El scrollbar

Close test effectively ！！！
Original link ： Components el-scrollbar Use

Use summary ： Many conclusions say that we should give el-srollbar Add a specified height , After a long time , The native horizontal scroll bar always appears below it , Bother it , Finally, refer to the blogger's link above , No problem .
Should be ：el-scrollbar You should wrap the elements that need to add scroll bars , If the content of the wrapped direct element exceeds the height of the wrapped element , Then a vertical scroll bar will appear .
Whether the horizontal scroll bar appears or not depends on el-scrollbar And the width of the wrapped direct element . And if you want the horizontal scroll bar to display , Need to add .is-horizontal {display: block; } This style .

<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>

combination el-table Examples of use
effect

Several columns are intentionally copied below ,
Used box Put the box around this form , And set up box The height of the box ( The purpose is to get the vertical scroll bar , Because the height of the data stack of the table is greater than box Altitude time , because el-scrollbar The existence of , Will produce a vertical scroll bar , But at this point , The horizontal scroll bar has not appeared .).
Set up box The width is 1200px( because (180 + 180 + 240 )*2 = 1200), And will el-scrollbar The width of is set to 300, such el-scrollbar The width of is less than box Width , A horizontal scroll bar will be generated

<template>
    <div>
        <div class="wrapper">
            <el-scrollbar class="scrollbar">
                <div class="box">
                    <el-table
                            class="table1"
                            :data="tableData">
                        <el-table-column
                                prop="date"
                                label=" date "
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label=" full name "
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                width="240"
                                label=" Address ">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label=" date "
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label=" full name "
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                width="240"
                                label=" Address ">
                        </el-table-column>
                    </el-table>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1518  get '
                }, {
                    date: '2016-05-04',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1517  get '
                }, {
                    date: '2016-05-01',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1519  get '
                }, {
                    date: '2016-05-03',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1516  get '
                }, {
                    date: '2016-05-02',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1518  get '
                }, {
                    date: '2016-05-04',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1517  get '
                }, {
                    date: '2016-05-01',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1519  get '
                }, {
                    date: '2016-05-03',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1516  get '
                }, {
                    date: '2016-05-02',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1518  get '
                }, {
                    date: '2016-05-04',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1517  get '
                }, {
                    date: '2016-05-01',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1519  get '
                }, {
                    date: '2016-05-03',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1516  get '
                }, {
                    date: '2016-05-02',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1518  get '
                }, {
                    date: '2016-05-04',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1517  get '
                }, {
                    date: '2016-05-01',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1519  get '
                }, {
                    date: '2016-05-03',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1516  get '
                }, {
                    date: '2016-05-02',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1518  get '
                }, {
                    date: '2016-05-04',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1517  get '
                }, {
                    date: '2016-05-01',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1519  get '
                }, {
                    date: '2016-05-03',
                    name: ' X.h. ',
                    address: ' Jinshajiang road, putuo district, Shanghai  1516  get '
                }]
            }
        }
    }
</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>