vue中el-table高度 动态自适应

Posted 2023-03-19

参考技术A 之前发那版会报错儿哈哈哈哈哈再来一个妹有问题的~

一个js文件(utils.js)中写一个获取动态高度的公共方法及防抖方法 ↓

在使用动态高度列表的页面中 👇
1.将固定内容的ref名儿写好 ↓

2.el-table的高度设置成动态 ↓

3.script标签顶部引入需要的方法 ↓

4.data中定义tableHeight ↓

5.mounted函数中执行的方法 ↓

6.methods中的方法们 ↓

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