0
点赞
收藏
分享

微信扫一扫

element table自动滚动

心智的年轮 2022-03-12 阅读 56

1.给table设置ref

<el-table
 :data="tableData"
  style="width: 100%"
  ref="table"
  height="300">
  <el-table-column
    prop="date"
    label="日期"
    width="180">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="180">
  </el-table-column>
</el-table>

2.定时增加距离顶部距离,实现滚动

 mounted(){
    this.init();
  },
  methods: {
    init () {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
      setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
              // 重置table距离顶部距离
              divData.scrollTop = 0
          }
      }, 100)
    }
  },
举报

相关推荐

0 条评论