Vue. 之 Element table 高度自适应

Posted charles-yuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue. 之 Element table 高度自适应相关的知识,希望对你有一定的参考价值。

Vue. 之 Element table 高度自适应

 

 

  使用vue创建table后,其高度自适应浏览器高度.

  在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight)

1         <el-table
2                 :data="tableData"
3                 :height="tableHeight"
4                 border
5                 style="width: 100%">

  

  在script中的data() 中添加高度的定义:

  这里的200是自己根据实际需求进行定义的,此处的200是因为该table上方有个form表单,减去form表单的高度(200)

1 data() 
2             return 
3                 tableHeight: window.innerHeight  - 200,
4        
5

 

以上是关于Vue. 之 Element table 高度自适应的主要内容,如果未能解决你的问题,请参考以下文章

vue+element table组件固定表头 高度根据浏览器窗口大小展示

vue Element-ui 表格自带筛选框自定义高度

请问用vue+element写的网站可以自适应手机屏幕吗

vue2.0之element table的使用

VUE之Element-ui的Table表格不能自适应

vue基于elementui设置表格动态高度的几种方法