关于vue.js:vueelementPlus-table自动滚动

8次阅读

共计 876 个字符，预计需要花费 3 分钟才能阅读完成。

依赖
“vue”: “^3.2.45”,
“element-plus”: “^2.2.21”

组件

<el-table ref="table" :height="tableHeight" :data="list" border stripe >
      
      <el-table-column align="center" ></el-table-column>
      <el-table-column align="center" ></el-table-column>
      <el-table-column align="center" ></el-table-column>
</el-table>

代码

export default {data() {
      return{time:''}
  },
  computed:{tableHeight(){
            let h =
                  window.innerHeight ||
                  document.documentElement.clientHeight ||
                  document.body.clientHeight;
            return h-28
        }
    },
  mounted() {this.autoScroll();
  },
  beforeUnmount() {if (this.timer) {clearInterval(this.timer);
      }
  },
  methods:{autoScroll(init) {this.$nextTick(() => {
          const t = 50
          const box = this.$el.querySelector('.el-scrollbar__wrap')
          const content = this.$el.querySelector('.el-table__body')
          this.timer = setInterval(() => {this.rollStart(box, content)
          }, t)
        })
      },
      rollStart(box, content) {if (box.scrollTop >= (content.scrollHeight - box.offsetHeight)) {box.scrollTop = 0} else {box.scrollTop++}
      }
  }
}

成果

正文完