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的指向名称

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

相关推荐
_Kayo_6 小时前
VUE2 学习笔记14 nextTick、过渡与动画
javascript·笔记·学习
咔咔一顿操作7 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹7 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz8 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
90后的晨仔8 小时前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js
90后的晨仔9 小时前
Vue 事件处理深入指南:从基础到进阶
前端·vue.js
落雪小轩韩10 小时前
Vue常见题目
javascript·vue.js
烛阴11 小时前
告别重复劳动:Gulp.js 新手入门教程
前端·javascript