el-table高度自适应、数据查询后高度展示错误问题

在很多场景中我们需要实现表格的高度自适应,即不同屏幕大小下需要使用不同的高度来设置表格,那么我们应该如何实现呢?

1.el-table实现高度自适应

通过以下代码可以实现表格根据屏幕进行自适应

javascript 复制代码
设置表格的高度
<el-table ref="tableData"
:data="tableData" border
:data-key="'id'"
:height="tableHeight"
:max-height="tableHeight">
</el-table>

<script>
export default {
  data: function () {
    return {
     
      tableData: [], // 表格数据
      tableHeight:0, // 表格高度
    };
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  created() {
    this.getTableHeight();
  },
  methods: {
    getTableHeight() {
      let tableH = 200; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
      console.log(this.tableHeight)
    },
  }
}

2.自适应的问题,数据变化后高度未更新

当我们自定义高度后,在查询数据时会出现以下的情况,我们表格高度不会撑满到我们实际给定的高度,如下图所示:

那么我们该如何修改呢?其实很简单,在你的查询方法里面添加如下代码即可:

javascript 复制代码
this.$nextTick(() => {
    this.$refs.tableData.doLayout();
});
注意:要在el-table表里面加ref的指向名称

现在我们在查询,高度也不会出现错误啦!如下图:

相关推荐
饺子大魔王的男人6 小时前
【Three.js】机器人管线包模拟
javascript·机器人
希希不嘻嘻~傻希希6 小时前
CSS 字体与文本样式笔记
开发语言·前端·javascript·css·ecmascript
爷_7 小时前
Nest.js 最佳实践:异步上下文(Context)实现自动填充
前端·javascript·后端
爱上妖精的尾巴8 小时前
3-19 WPS JS宏调用工作表函数(JS 宏与工作表函数双剑合壁)学习笔记
服务器·前端·javascript·wps·js宏·jsa
草履虫建模8 小时前
Web开发全栈流程 - Spring boot +Vue 前后端分离
java·前端·vue.js·spring boot·阿里云·elementui·mybatis
—Qeyser8 小时前
让 Deepseek 写电器电费计算器(html版本)
前端·javascript·css·html·deepseek
喝拿铁写前端10 小时前
前端批量校验还能这么写?函数式校验器组合太香了!
前端·javascript·架构
然我10 小时前
面试官最爱的 “考试思维”:用闭包秒杀递归难题 🚀
前端·javascript·面试
難釋懷11 小时前
Vue-github 用户搜索案例
前端·vue.js