el-table使表格滚动
时间: 2023-10-28 16:01:38 浏览: 81
可以通过设置 `height` 和 `max-height` 属性来使 `el-table` 具有滚动特性。其中,`height` 属性设置表格的高度,超出部分会自动出现滚动条,而 `max-height` 属性则是限制表格的最大高度,当表格内容不足时,表格高度会自适应内容。
例如:
```html
<template>
<el-table :data="tableData" height="300px">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2021-01-01', name: '张三', address: '北京市海淀区' },
{ date: '2021-01-02', name: '李四', address: '上海市浦东新区' },
{ date: '2021-01-03', name: '王五', address: '深圳市南山区' }
// ...
]
}
}
}
</script>
```
这样,当表格内容超出 `height` 属性设置的高度时,会自动出现纵向滚动条。如果想要同时出现横向滚动条,可以在 `el-table` 组件上添加 `:style="{ width: '100%' }"` 属性。
阅读全文