el-table表格固定表头与合计行,内容部分自动滚动展示
el-table表格固定表头与合计行,内容部分自动滚动
·
这里有个需求要在点击文字弹出的弹窗中展示明细数据,要求用表格展示数据,并且不做分页,表头与末尾合计行固定,中间内容部分滑动展示且可以
自动滚动。下边贴代码
html部分,因为我这里有多个不同的表格展示字段,所以弹窗中的表格写成了动态列加载。
<el-table
border
ref="tableBox"
:max-height="tableHeight"
:data="tableData"
v-loading="tableLoading"
element-loading-text="拼命加载中"
:header-cell-style="{background:'#F2F6FC',color:'#000000'}"
show-summary
sum-text="合计行"
@mouseover.native="mouseover"
@mouseout.native="mouseout"
>
<el-table-column
v-for="(item, index) in prodectData"
:key="index"
:label="item.label"
:prop="item.prop"
:align="item.align || 'center'"
:min-width="item.width"
:type="item.type"
:show-overflow-tooltip="item.overflow">
<template slot-scope="scope">
<div v-text="tableData[scope.$index][item.prop] === null ? '-' : tableData[scope.$index][item.prop]"></div>
</template>
</el-table-column>
</el-table>
至于表头固定,实际上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生命周期。
更多推荐
所有评论(0)