element

2023-04-13 10:27| 来源: 网络整理| 查看: 265

想让element-ui的表格 el-table 出现滚动条的时候，如果不做处理就只能是 height=“XXXpx”，给它一个固定的高度，我们的页面正常情况下，是不允许出现页面级滚动条的，也是不美观的，想让table自适应高度并且有滚动条，而且不会出现页面级滚动条，可以这么实现，下面是我写的一个小组件，如果你明白了他的原理，就可以灵活运用在你自己的项目中了。

1、组件代码（理解使用）

主要使用了flex让table-container占满剩余部分，使用绝对定位让table-container定在page-body-table 上面，加了几个插槽方便复用

export default { data() { return {} }, } .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%; } } } 2、如何使用该组件

引入和注册组件就不写了，如果你的页面大部分都是这种结构，或者较多都是这种页面结构，可以全局注册，注意el-table的height属性的值必须是100%

头部一边表格都会有分页分页放在这里挺好的 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 弄', }, ], } }, }

【本文地址】

element

element

今日新闻

推荐新闻