这里有个需求要在点击文字弹出的弹窗中展示明细数据，要求用表格展示数据，并且不做分页，表头与末尾合计行固定，中间内容部分滑动展示且可以
自动滚动。下边贴代码
html部分，因为我这里有多个不同的表格展示字段，所以弹窗中的表格写成了动态列加载。
<el-tableborderref="tableBox":max-height="tableHeight":data="tableData"v-loading="tableLoading"element-loading-text="拼命加载中":header-cell-style="{background:'#F2F6FC',color:'#000000'}"show-summarysum-text="合计行"@mouseover.native="mouseover"@mouseout.native="mouseout"><el-table-columnv-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 () {// 拿到表格挂载后的真实DOMconst 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生命周期。
