解决vue2 element-table 自适应高度问题

解决element表格自适应高度问题

在写公司后台项目的时候遇到一个需求,要求表格页面不能有滚动条,所以必须封装一个公共方法来实现表格自适应高度

第一步 实现自定义指令去监听表格元素高度变化

我这边使用封住思想 首先创建在obSize文件夹下创建index.js内容如下

// 复制代码
const map = new WeakMap()
// ob监听
const ob = new ResizeObserver((entries) => {
   for (const entry of entries) {
       // 处理元素对应的回调
       const handler = map.get(entry.target)
       if (handler) {
           const box = entry.borderBoxSize[0]
           // 循环entry.target 累加offsetTop 从而得到距离页面顶部距离
           let setTop = countTop(entry.target, 0)

           handler({
               width: box.inlineSize,
               height: box.blockSize,
               entry: entry,
               bodHeight: window.document.body.clientHeight,
               setTop: setTop,
               tableHeight: (window.document.body.clientHeight - setTop - 50 - box.inlineSize) > 0 ? '' : window.document.body.clientHeight - setTop - 72
           })
       }
   }
})

export function countTop(el, topn) {
   if (el.offsetParent) {
       return countTop(el.offsetParent, topn + el.offsetTop)
   } else {
       return topn
   }

}
export default {
   inserted(el, binding) {
       ob.observe(el)
       // 监听el元素尺度的变化
       map.set(el, binding.value)
   },
   unbind(el) {
       // 取消监听
       ob.unobserve(el)
   },
}

注册vue指令在directive文件夹index.js文件中

javascript 复制代码
import obSize from './obSize'
const install = function (Vue) {
  //这里可以放入多个自定义指令
  Vue.directive('ob-size', obSize)
}

if (window.Vue) {

  Vue.use(install); // eslint-disable-line
}

export default install

在main.js引入directive

javascript 复制代码
import directive from './directive'
Vue.use(directive)

第二步 封装mixins

在mixins文件夹内创建estimateTableHeight.js内容如下 70 代表距离页面底部的高度

javascript 复制代码
import { countTop } from '@/directive/obSize'
export default {
    data() {
        return {
            tableHeight: 0,
        }
    },
    methods: {
        handleSizeChange(e) {
            this.tableHeight = e.tableHeight;
        },
    },
    // 监听showSearch
    watch: {
        showSearch(val) {
            // 获取element table元素
            const dome = document.getElementsByClassName('el-table');
            let setTop = countTop(dome, 0)
            this.tableHeight = window.document.body.clientHeight - setTop - 70
        },
    },
    mounted() {
    //监听页面尺寸变化
        window.addEventListener('resize', () => {
            const dome = document.getElementsByClassName('el-table');
            let setTop = countTop(dome, 0)
            this.tableHeight = window.document.body.clientHeight - setTop - 70
        });
    },
}

第三步 在页面引入

引入 import estimateTableHeight from "@/mixins/estimateTableHeight";

export default { mixins: [estimateTableHeight], }

在el-table上加入 v-ob-size="handleSizeChange" :height="tableHeight"

ini 复制代码
<el-table
        v-ob-size="handleSizeChange"
        :height="tableHeight"
        v-loading="loading"
        :data="List"
>
      

大功告成!!!!!!!!!!!!!!!

相关推荐
蓝婷儿30 分钟前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐31 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠35 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农35 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧2 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉2 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能