以下記錄是個(gè)人開發(fā)過程中遇到的問題：

效果.gif

當(dāng)列表內(nèi)容部分可見時(shí)，保持橫向滾動(dòng)條在下方。

實(shí)現(xiàn)

原理
1.這里涉及到兩個(gè)Dom元素，類名分別為 el-table__body-wrapper、el-table__body通過觀察發(fā)現(xiàn)橫向滾動(dòng)條在于el-table__body-wrapper上，el-table__body則是實(shí)際的列表內(nèi)容，當(dāng)el-table__body寬度超出el-table__body-wrapper時(shí)就會(huì)出現(xiàn)橫向滾動(dòng)條。
2.因此只需要?jiǎng)討B(tài)的修改el-table__body-wrapper的height即可實(shí)現(xiàn)想要的效果。
3.在頁面發(fā)生滾動(dòng)、頁面大小改變以及數(shù)據(jù)源更新的時(shí)候?qū)?code>el-table__body-wrapper的height進(jìn)行調(diào)整。

代碼
這里是通過mixin方式的實(shí)現(xiàn)。

let el;
let tableBodyWrapDom = document.getElementsByClassName('.el-table__body-wrapper');
let tableBodyDom = document.getElementsByClassName('.el-table__body')

function handle() {
  if (!el) return;
  // top為dom上側(cè)距離可視窗口頂部的值
  const { top:tableBodyDomTop } = tableBodyWrapDom.getBoundingClientRect();  
  if (tableBodyDomTop > window.innerHeight || tableBodyWrapDom.classList.contains('is-scrolling-none')) {
    // 此時(shí)列表在可視窗口的下側(cè)不可見區(qū)域，因此不做任何修改
    tableBodyWrapDom.style.height = 'unset'
    tableBodyWrapDom.style.marginBottom = 'unset';
  } else {
    // 窗口高度 - 列表距頂部值 且 不超過自身實(shí)際值
    let wrapHeight = Math.min(window.innerHeight - tableBodyDomTop, tableBodyDom.offsetHeight);
    tableBodyWrapDom.style.height = wrapHeight + 'px';
    // 需要用marginBottom填充，以保持列表原有高度，避免頁面的縱向滾動(dòng)條變化導(dǎo)致頁面滾動(dòng)的不流暢
    // 可以通過注釋這一行代碼觀察其效果差異
    tableBodyWrapDom.style.marginBottom = (tableBodyDom.offsetHeight - wrapHeight) + 'px';
    // console.log(tableBodyWrapDom.style.marginBottom,'marginBottom')
  }
}

export default {
  mounted() {
    el = this.$el; // 當(dāng)前組件的Dom對(duì)象，避免操作到本組件之外的Dom
    tableBodyWrapDom = el.querySelector('.el-table__body-wrapper');
    tableBodyDom = el.querySelector('.el-table__body');
     // 監(jiān)聽事件
     window.addEventListener('scroll', handle,true);
     window.addEventListener('resize', handle,true);
   },
   destroyed() {
     // 在組件銷毀時(shí)取消監(jiān)聽
     window.removeEventListener('scroll',  handle,true);
     window.removeEventListener('resize',  handle,true);
   },
   watch: {
     list() {
       // 當(dāng)列表數(shù)據(jù)源發(fā)生變化時(shí)，再次觸發(fā)
       this.$nextTick( handle);
     }
   }
}

watch中監(jiān)聽的list：在引用混合的組件中

<el-table
        ref="brandTable"
        :data="list" <----
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
....
</el-table>

原文參考：elementui el-table 橫向滾動(dòng)條保持在可視范圍中