el-table表格高度设置
时间: 2023-11-11 22:58:19 浏览: 182
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
5星 · 资源好评率100%
el-table 表格的高度可以通过设置 table 的 height 属性来控制。height 可以设置为一个数字或字符串,也可以设置为一个函数,函数的返回值为一个数字或字符串。
示例代码:
```html
<template>
<el-table
:data="tableData"
style="width: 100%"
:height="tableHeight">
<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>
<script>
export default {
data() {
return {
tableData: [{
date: '2022-01-01',
name: '张三',
address: '北京市朝阳区'
}, {
date: '2022-01-02',
name: '李四',
address: '上海市浦东新区'
}, {
date: '2022-01-03',
name: '王五',
address: '深圳市南山区'
}],
tableHeight: 300
};
}
};
</script>
```
阅读全文