The El table horizontal scroll bar is fixed at the bottom of the visual window

    There is a need , When el-table When the width of exceeds the width of the browser , although el_table A scroll bar appears at the bottom , But each time you need to scroll to the bottom , Can be used el-table Scroll of , It is trouble . So when el_table When the width of exceeds the screen width , To add a horizontal scroll bar at the bottom of the visual range , I found four different methods on the Internet , I tried it all over again , I've posted the original addresses and renderings of the four methods , It's a personal choice , The second one I used myself , Written by a big man .

Method 1、 stay el-table Upper manual Add scroll bar

Link to original el-table Add top scroll bar , The table realizes double scroll bars up and down _MrsTing The blog of -CSDN Blog _el-table Set scroll bar

1、 stay el-table Add a... Above div,div The width of is the same as that of the table .

<div ref="topScroll" class="top-scroll">
  <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div>
</div>
<el-table ref="tableRef" :data="list"  v-loading.body="listLoading">

</el-table>

  For two div Add the style , Inside div Be sure to set the height , If it is not set, the scroll bar will not come out

.top-scroll {
  width: 100%;
  overflow-x: auto;
}
.top-scroll-content {
  /*  If the height is not set, the scroll bar will not come out  */
  height: 1px; 
}

2、 Set the initial value of the scroll bar

data(){
 return{
      topScrollWidth: 0,
      tableDom: null,
 }
},
methods:{
  setScrollWidth() {
      // Set the width value of the top rollover bar to the scroll width of the table 
    this.$nextTick(() => {
      this.topScrollWidth = this.$refs.tableRef.bodyWrapper.scrollWidth + 'px';
    })
  },
  getList(){
    // After getting the data , Set the width of the top scroll bar 
     getListPer(data).then(res => {
        this.list = res.list;
        this.setScrollWidth();
        this.listLoading = false;
      })
  }
}

3、 stay watch Listen for the scroll bar width value in , Realize the synchronization of two scroll bars

watch:{
   topScrollWidth: {
      //  Two scroll bars scroll at the same time 
      handler(newVal, oldVal) {
        //  Listen to the scroll bar 
        this.$nextTick(() => {
          this.tableDom = this.$refs.tableRef.bodyWrapper
          this.tableDom.addEventListener('scroll', () => {
             //  The top scroll bar of the form is synchronized with the bottom 
            let scrollLeft = this.tableDom.scrollLeft
            this.$refs.topScroll.scrollTo(scrollLeft, 0);
          })
          let topScroll = this.$refs.topScroll
          topScroll.addEventListener('scroll', () => {
            //  The scroll bar at the bottom of the form is synchronized with the top 
            let scrollLeft = this.$refs.topScroll.scrollLeft
            this.$refs.tableRef.bodyWrapper.scrollTo(scrollLeft, 0);
          })
        })
      },
      deep: true
    },
},

4、 Monitor the zoom operation of the browser , And clear the listener when the page is destroyed

  mounted() {
    this.getList()
    // Monitor the zoom operation of the browser 
    window.addEventListener("resize", () => {
      this.setScrollWidth();
    })
  },
  beforeDestroy() {
   // Clear listening 
    window.removeEventListener("resize", () => {
      this.setScrollWidth();
    })
  },

design sketch

  Method 2、 Use v-horizontal-scroll

Written by a big man on the Internet , It's really powerful

el-table Idea of bottom suction treatment scheme of horizontal scroll bar - Bili, Bili

Source warehouse address

GitHub - mizuka-wu/el-table-horizontal-scroll: el-table awlays show horizontal-scroller on bottom

install    v-horizontal-scroll="'always'"

npm install el-table-horizontal-scroll

Registration instructions

Global registration

import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)

Or register on the page  

import horizontalScroll from 'el-table-horizontal-scroll'

export default {
    directives: {
        horizontalScroll
    }
}

stay el-table Add v-horizontal-scroll

have access to  always  or  hover , The default value is hover, When hovering over a table , The column displays ;

Or you can change it to always, And make the column always show

<el-table :data="data"  v-horizontal-scroll="'always'">

</el-table>

design sketch （ I chose this method myself , Personally, I think it is better than other methods ）

Method 3：el-table add to max-height value

Link to the original text ：element How to make table The horizontal scroll bar of the table is always displayed , Instead of scrolling to the bottom of the table _Creci The blog of -CSDN Blog _element table Roll horizontally

The way is to give el-table Add one max-height value , Dynamically calculate the value when the page is rendered .

<el-table :max-height="maxHeight"></el-table>


mouted(){
  this.$nextTick(()=>{
    this.maxHeight = window.innerHeight - 300;//300 Is the height of other components in the page except the table 
   })
}

design sketch ​​​​​​​

Method 4： Use CSS 

Link to the original text ：

element table The scroll bar fixes the bottom of the view _ Silver wolf Xiaoyue's blog -CSDN Blog _element table The scroll bar is fixed

 html:

<div class="table-parent" @contextmenu.prevent.capture>
    <el-table :data="excelData" border class="table-box">
    </el-table>
</div>

@contextmenu.prevent.capture  Block the browser's default right-click behavior ,  Event modifier capture Add a listener to the element , When an element bubbles , Trigger the element with the modifier first

css:

.table-parent {
  position: absolute;
  overflow: auto;
}

.table-parent .table-box {
  position: relative;
  min-width: 1300px;
  overflow: auto;
}

    take el-table Enlarge the width of , A horizontal scroll bar appears at the bottom of the page , But if el-table The layout above has been written dead , There will be blank space

design sketch ：