elementUI表格自适应高度

开发过程中,页面难免需要做到适应屏幕大小的动态变化,比如表格高度随着窗口缩放而变化;

我的框架:elementui+vue

在elementui里有详细的记载高度属性的使用方式:

 

 然而如果一开始动态高度tableHeight定义时赋值(如tableHeight:100或tableHeight:'100'),之后表格的高度则不会再根据tableHeight变化而变化,所以定义tableHeight时应该为null或"";

html

<template>
    <el-table :data="tableData" :height="tableHeight" style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

js

new Vue({
    data:function(){
        return{
            tableHeight:null,
       tableData:[]
     }
}, mounted(){ window.onresize = function() { this.tableHeight=计算; }.bind(this) } })

这样随窗口变化的自适应就ok了。

如果动态高度不起作用,还有个重新渲染表格的办法,就是使用v-if控制。

posted @ 2020-07-09 10:09  嘻嘻哈哈大只佬  阅读(6074)  评论(0)    收藏  举报