个人适合做什么网站,wordpress acg站,网站建设立项,如何快捷建企业网站估计有不少小伙伴在开发公司的ERP使用el-table都会遇到这么一个问题#xff0c;就是产品经理提出#xff0c;页面不出现滚动条#xff0c;因为不美观。但是当el-table内容过多#xff0c;超过页面的宽度时候#xff0c;页面就会有滚动条。那应该如何解决呢?能不能让滚动条…估计有不少小伙伴在开发公司的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-tablereftablev-auto-height:tableHeight-50 // 自定义一个默认值:max-heightheight // 初始值
/el-table data(){return {height:0, // 初始值}
}代码解释
v-auto-height 指令作用用于监听窗口的resize时间并根据窗口大小动态调整表格高度确保表格最终占据的可用空间v-auto-height:tableHeight‘-50’ 表示将tableHeight 属性作为目标属性并将-50作为初始值tableHeight用于存储表格的最大高度但会在autoHeightResize指令中进行动态计算
