| el | 您所在的位置：网站首页 › vue列表自动滚动 › el |
el
|
这里有个需求要在点击文字弹出的弹窗中展示明细数据，要求用表格展示数据，并且不做分页，表头与末尾合计行固定，中间内容部分滑动展示且可以 自动滚动。下边贴代码 html部分，因为我这里有多个不同的表格展示字段，所以弹窗中的表格写成了动态列加载。 至于表头固定，实际上element ui有介绍，只要给el-table设置了高度属性表头就固定了，主要是中间的内容部分我们要怎么去动态计算高度展示 mounted () { this.getTableData() this.beginShowing() // 监听浏览器窗口大小变化 window.onresize = () => { clearInterval(this.myTimer) this.beginShowing() } }, methods: { getTableData() {}, beginShowing() { this.$nextTick(function () { // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离 if(this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) { this.tableHeight = window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300; this.$refs.tableBox.doLayout() this.roll() } }) }, roll () { // 拿到表格挂载后的真实DOM const table = this.$refs.tableBox // 拿到表格中承载数据的div元素 const bodyWrapper = table.bodyWrapper // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素) this.myTimer = setInterval(() => { // 元素自增距离顶部1像素 bodyWrapper.scrollTop++ // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容) if (bodyWrapper.clientHeight + bodyWrapper.scrollTop === bodyWrapper.scrollHeight) { // 重置table距离顶部距离 bodyWrapper.scrollTop = 0 } }, 100) }, // 鼠标进入表格 mouseover() { clearInterval(this.myTimer) }, // 鼠标离开表格 mouseout() { this.roll() }, }
我这个表格是写在弹窗中展示的，大家可以自由发挥在页面中也一样，需要注意的是在页面加载时获取表格内容高度的时机，在$nextTick中获取表格实例的数据计算DOM高度，另外在监听浏览器窗口大小变化时要先清除定时器，否则会出现定时器速度越来越快的问题，而且鼠标进入表格和移出表格的事件要加修饰符.native否则可能不起作用。还有我这个表格是封装在el-dialog中。父页面引用这个组件的时候要在组件标签写v-if控制弹窗显隐，否则无法触发弹窗组件内的mounted生命周期。 |
【本文地址】
公司简介
联系我们