el-table实现当内容过多时，el-table显示滚动条，页面不显示滚动条

估计有不少小伙伴在开发公司的 ERP 使用 el-table 都会遇到这么一个问题，就是产品经理提出，页面不出现滚动条，因为不美观。但是当 el-table 内容过多，超过页面的宽度时候，页面就会有滚动条。那应该如何解决呢? 能不能让滚动条出现在 el-table 的容器中，而不是出现在页面上呢?

实现方案就是 resize 时间 结合 el-table 的 max-height 属性 然后根据页面大小实现自适应

定义 auto-height 指令

export default {
	componentUpdate(el,binding,vnode) {
		const self = vnode.context;
		if(!self || typeof self[binding.arg] === 'undefined' || self.autoHeightResizeListener) return
		self.autoHeightResizeListener = () => {
			let top = el.offsetTop;
			let cur = el.offsetParent;
			while (cur) {
				top += cur.offsetTop;
				cur = cur.offsetParent;
			}
			const h = (window.innerHeight-top) + binding.value;
			self[binding.arg] = Math.max(h,100);
		}
		window.addEventListener('resize', self.autoHeightResizeListener,false);

		setTimeout(self.autoHeightResizeListener,50)
	}
	
	unbind(el,binding,vnode) {
		const self = vnode.context;
		if(self && self.autoHeightResizeListener) {
			window.removeEventListener('resize',self.autoHeightResizeListener,false)
			self.autoHeightResizeListener = null;
		}
	}

全局注册

import autoHeight from './auto-height.js'

Vue.directive('auto-height',autoHeight )

案例使用

el-table
	ref='table'
	v-auto-height:tableHeight='-50'  
	:max-height='height'>  
/el-table>	


data(){
	return {
		height:0, 
	}
}

代码解释：

• v-auto-height 指令作用：用于监听窗口的 resize 时间，并根据窗口大小动态调整表格高度，确保表格最终占据的可用空间
• v-auto-height:tableHeight=‘-50’表示将 tableHeight 属性作为目标属性，并将 -50 作为初始值
• tableHeight 用于存储表格的最大高度，但会在 autoHeightResize 指令中进行动态计算