vue2+el-table监听滚动翻页,并修改侧边滚动条样式

使用ref属性获取组件实例添加scroll事件,table组件高度通过lineHeight属性修改,注意行内有padding:12px;叠加高度

<el-table :data="tableData" :header-cell-style="{ background: '#f2f2f2', color: '#333333', lineHeight: '25px' }"
        :row-style="{ color: '#666666', lineHeight: '25px' }" height="462" border ref="tableDataScroll">
        <el-table-column prop="id" label="学号" min-width="100" />
        <el-table-column prop="name" label="姓名" min-width="100" />
        <el-table-column prop="class" label="班级" min-width="100" />
        <el-table-column prop="sex" label="性别" min-width="100">
          <template slot-scope="scope">
            <span>{
   
   { scope.row.sex === 0 ? '男' : '女' }}</span>
          </template>
        </el-table-column>
      </el-table>

js代码:

<script>
export default {
  data() {
    return {
      tableData: [...数据],
      currentPage: 1,
      listStatus: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.tableScroll()
    }, 0);
  },
  methods: {
    tableScroll() {
      this.$refs.tableDataScroll.bodyWrapper.addEventListener('scroll', (res) => {
        const height = res.target
        const clientHeight = height.clientHeight
        const scrollTop = height.scrollTop
        const scrollHeight = height.scrollHeight
        if (clientHeight + scrollTop >= scrollHeight - 80 && this.listStatus) {
          this.currentPage++
          this.getDate()
        }
      }, true)
    },
    getDate() {
      let total = 40
      let data = [
      {
        id: '1001',
        name: '王五',
        class: '12班',
        sex: 1
      },...数据
      ]
      this.tableData.push(...data)
      if (this.tableData.length >= total) { this.listStatus = false }
    }
  },
}
</script>

修改滚动条样式代码:

/deep/ .el-table__body-wrapper::-webkit-scrollbar{
    width: 6px !important;
    height: 6px !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb{
    background: #EAEAEA !important;
    border-radius: 3px;
}

但是table表格留的是原滚动条的宽度,会有空隙

/deep/ .el-table colgroup col[name='gutter']{
    width: 6px;
}
/deep/ .el-table__body{
    width: 100% !important;
}

 添加上述代码即可