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

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

相关推荐
互联网搬砖老肖11 分钟前
React的单向数据绑定
前端·javascript·react.js
john_Asura2 小时前
Vue 前端全方位性能优化指南
前端·vue.js·性能优化
日晞3 小时前
深浅拷贝?
开发语言·前端·javascript
Bonnie_12153 小时前
05-jenkins学习之旅-vue前项目部署实践
vue.js·学习·jenkins
沐土Arvin4 小时前
性能优化关键:link、script和meta的正确打开方式
开发语言·前端·javascript·设计模式·性能优化·html
格调UI成品5 小时前
React vs Vue.js:选哪个框架更适合你的项目?
前端·vue.js·react.js
じ☆ve 清风°5 小时前
JavaScript计时器详解:setTimeout与setInterval的使用与注意事项
开发语言·javascript·ecmascript
BillKu5 小时前
Vue3监听对象数组属性变化方法
javascript·vue.js·ecmascript
Z_ One Dream5 小时前
本地依赖库的版本和库依赖的版本不一致如何解决?
开发语言·前端·javascript
万米商云6 小时前
商城图片性能优化实战:懒加载与下一代格式的化学反应
开发语言·前端·javascript