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) returnself.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-tableref='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指令中进行动态计算