vue项目 解决el-table自适应高度,vue页面不显示多条滚动条,超出的部分让el-table内部出现滚动条(推荐使用第二种解决方案;TAdaptivePage 组件新增左右分栏布局)
要解决Vue项目中的el-table自适应高度问题,并且在页面上不显示多余的滚动条,可以通过设置el-table的高度为父容器的高度,并且通过CSS样式来控制滚动条的显示。
以下是一个简单的示例:
- 在Vue组件中设置el-table的高度:
<template>
<el-table :data="tableData" style="height: 100%;">
<!-- 列配置 -->
</el-table>
</template>
- 在组件的
<style>
部分设置父容器的高度,并隐藏滚动条:
<style scoped>
.table-wrapper {
height: 500px; /* 或者其他需要的高度 */
overflow: auto; /* 显示滚动条 */
}
.el-table__body-wrapper {
overflow: auto; /* 隐藏滚动条,如果需要 */
}
</style>
- 在Vue组件的
<script>
部分,设置表格数据:
<script>
export default {
data() {
return {
tableData: [
// 数据列表
]
};
}
};
</script>
确保.table-wrapper
类被应用到包含el-table的最近的父容器上。如果el-table外层没有额外的包装元素,可以直接在el-table上设置样式。
这样设置之后,el-table将自适应其父容器的高度,并且只会在父容器需要时显示滚动条。超出容器的部分将会让el-table的滚动条出现,用户可以通过滚动来查看全部内容。
评论已关闭