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