想让element-ui的表格 el-table 出现滚动条的时候,如果不做处理就只能是 height=“XXXpx”,给它一个固定的高度,我们的页面正常情况下,是不允许出现页面级滚动条的,也是不美观的,想让table自适应高度并且有滚动条,而且不会出现页面级滚动条,可以这么实现,下面是我写的一个小组件,如果你明白了他的原理,就可以灵活运用在你自己的项目中了。
1、组件代码(理解使用)
主要使用了flex让table-container占满剩余部分,使用绝对定位让table-container定在page-body-table 上面,加了几个插槽方便复用
<template>
<div class="table-page-container">
<div class="page-header">
<slot name="header"></slot>
</div>
<div class="page-body-table">
<div class="table-container">
<slot name="table"></slot>
</div>
</div>
<div class="page-footer">
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
}
</script>
<style lang="scss" scoped>
.table-page-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.page-body-table {
flex: 1;
position: relative;
.table-container {
position: absolute;
width: 100%;
height: 100%;
}
}
}
</style>
2、如何使用该组件
引入和注册组件就不写了,如果你的页面大部分都是这种结构,或者较多都是这种页面结构,可以全局注册,注意el-table的height属性的值必须是100%
<template>
<div class="page-container">
<TablePageContainer>
<template #header>
<div>头部</div>
</template>
<template #table>
<!-- table 部分 -->
<el-table :data="tableData" height="100%" style="width: 100%">
<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>
<template #footer>一边表格都会有分页分页放在这里挺好的</template>
</TablePageContainer>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
}
},
}
</script>