El table X-axis direction (horizontal) scroll bar slides to the right by default

Recently, I encountered a strange demand , To be one table When there is too much data , There must be a horizontal scroll bar , The default is near the leftmost , Now, we need it to slide to the right by default , I made a lot of efforts and my own thinking, and finally realized the demand , The two methods are only for reference ：

demand ：

  Very simple. el-table  Two columns on the left el-table-column added   fixed Fixed on the left , Slide the scroll bar to see the content behind , Now to initialize, slide it to the right .

Method 1: to el-table Add ref='tableList' attribute , Modify its native properties bodyWrapper Inside Of scrollLeft value , Remember to put this.$nextTick in . And add setTimeout , Otherwise there will be dom The problem of rendering , The value cannot be attached .

  mounted() {
          
 
         this.$nextTick(()=>{
            // Get it first   The width of the table 
             var widthKK =this.$refs.tableList.bodyWidth     
             // solve  scrollLeft   The problem that value cannot be assigned to value 
             setTimeout(()=>{
               this.$refs.tableList.bodyWrapper.scrollLeft=Number(widthKK.replace('px',''))
                 
              },1000)// Must be 1000 above   To take effect 
            })
    },

  Be careful ： We must add  setTimeout And you have to set 1s above , Otherwise, it will not take effect .

Method 2： Don't use vue Of ref, Direct manipulation js Get its elements and directly change its scrollLeft value .

 mounted() {
    this.$nextTick(()=>{
       var widthKK =this.$refs.tableList.bodyWidth       
       // solve  scrollLeft   The problem that value cannot be assigned to value 
       setTimeout(()=>{
             document.getElementsByClassName("el-table__body-wrapper")[0].scrollLeft=Number(this.widthKK.replace('px',''))
             },1000)// Must be 1000 above   To take effect 
      })
},

Be careful ： This method will get all the pages are el-table__body-wrapper The elements of , If your page has multiple tables, pay attention to the appropriate subscript .

Last ： If the page has multiple tables , And when you use the first method , It is recommended to use ref Do not take the same value , Otherwise, it will not take effect .