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

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

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

定义auto-height 指令

// auto-height.js
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;
		}
	}复制

全局注册

//main.js
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指令中进行动态计算