table表格 新增顶部滚动条el-table(elment-ui), Table(iview)

需求：增加顶部滚动条，方便查看表格里面隐藏在后面的数据

1. el-table(elment-ui) 的实现方法

• table表格上面添加一个div,外层设置为100%，内层div(内容区域)设置为table内容宽度

 	  <!-- 顶部滚动条 -->
      <div ref="topScroll" class="top-scroll">
        <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div>
      </div>
      <!-- table区域 -->
      <el-table
        :data="list"
        empty-text="暂无数据"
        style="width: 100%"
        ref="tableRef"
      >
      	.....
      </el-table>

• 顶部div设置样式，里面的div一定要设置高度，不设置的话滚动条出不来

.top-scroll {
  width: 100%;
  overflow-x: auto;
}
.top-scroll-content {
  /* 高度不设置的话滚动条出不来 */
  height: 1px; 
}

• 滚动条数据设置

data(){
 return{
      topScrollWidth: 0,
      tableDom: null,
 }
},
methods:{
  // 该方法在获取列表数据后调用
  setScrollWidth() {
      //设置顶部滚顶条宽度值为表格的滚动宽度
    this.$nextTick(() => {
      this.topScrollWidth = this.$refs.tableRef.bodyWrapper.scrollWidth + 'px';
    })
  },
  getTable(){
    //在获取数据后，设置顶部滚动条的宽度
     getAllData(data).then(res => {
        this.data = res.list;
        this.setScrollWidth();
      })
  }
}

• 监听滚动条的宽度，实现上下两个滚动条同步

watch:{
   topScrollWidth: {
      // 两个滚动条同时滚动
      handler(newVal, oldVal) {
        // 监听滚动条
        this.$nextTick(() => {
          this.tableDom = this.$refs.tableRef.bodyWrapper
          this.tableDom.addEventListener('scroll', () => {
             // 表格顶部滚动条与底部同步
            let scrollLeft = this.tableDom.scrollLeft
            this.$refs.topScroll.scrollTo(scrollLeft, 0);
          })
          let topScroll = this.$refs.topScroll
          topScroll.addEventListener('scroll', () => {
            // 表格底部滚动条与顶部同步
            let scrollLeft = topScroll.scrollLeft
            this.tableDom.scrollTo(scrollLeft, 0);
          })
        })
      },
      deep: true
    },
}

• 效果图
  

2. Table(iview) 的实现方法

• table表格上面添加一个div

 	  <!-- 顶部滚动条 -->
      <div ref="topScroll" class="top-scroll">
        <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div>
      </div>
      <!-- table区域 -->
      <el-table
        :data="list"
        empty-text="暂无数据"
        style="width: 100%"
        ref="tableRef"
      >
      	.....
      </el-table>

• 顶部div设置样式

.top-scroll {
  width: 100%;
  overflow-x: auto;
}
.top-scroll-content {
  /* 高度不设置的话滚动条出不来 */
  height: 1px; 
}

• 滚动条数据设置

data(){
 return{
      topScrollWidth: 0,
      tableDom: null,
 }
},
methods:{
  // 该方法在获取列表数据后调用
  setScrollWidth() {
      //设置顶部滚顶条宽度值为表格的滚动宽度
    this.$nextTick(() => {
    // 这里获取的dom (document.querySelector('.ivu-table-body table'))是表格内容区域
      this.topScrollWidth = document.querySelector('.ivu-table-body table').scrollWidth + 'px'
    })
  },
  getTable(){
    //在获取数据后，设置顶部滚动条的宽度
     getAllData(data).then(res => {
        this.data = res.list;
        this.setScrollWidth();
      })
  }
}

• 监听滚动条的宽度，实现上下两个滚动条同步

watch: {
    topScrollWidth: {
      // 两个滚动条同时滚动
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.tableDom = document.querySelector('.ivu-table-body')
          this.tableDom.addEventListener('scroll', () => {
            // 表格顶部滚动条与底部同步
            let scrollLeft = this.tableDom.scrollLeft
            this.$refs.topScroll.scrollTo(scrollLeft, 0);
          })
          let topScroll = this.$refs.topScroll
          topScroll.addEventListener('scroll', () => {
            // 表格底部滚动条与顶部同步
            let scrollLeft = topScroll.scrollLeft
            this.tableDom.scrollTo(scrollLeft, 0);
          })
        })
      },
      deep: true,
    },
 },

• 效果图