test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-08 06:57:42 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

移除 TableHeightAdaption 组件

Browse Source
This commit is contained in:
hooray 2022-03-11 11:10:22 +08:00
parent ffcf9922c5
commit 3685b70c2f
2 changed files with 7 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/TableHeightAdaption/index.vue
View File

@ -1,32 +0,0 @@
<script setup name="TableHeightAdaption">
onMounted(() => {
nextTick(() => {
// 获取表头高度，然后设置 .el-table__body-wrapper 和 .el-table__fixed-body-wrapper 的 height
let height = document.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight
document.getElementsByClassName('el-table__inner-wrapper')[0].style.height = '100%'
document.getElementsByClassName('el-table__body-wrapper')[0].style.height = `calc(100% - ${height}px)`
for (let item of document.getElementsByClassName('el-table__fixed-body-wrapper')) {
item.style.height = `calc(100% - ${height}px)`
}
})
})
</script>
<template>
<div class="adaption-container">
<slot />
</div>
</template>
<style lang="scss" scoped>
.adaption-container {
height: 100%;
overflow-y: auto;
:deep(.el-table) {
height: 100%;
.el-table__body-wrapper {
overflow-y: auto;
}
}
}
</style>

17
src/views/component_extend_example/table.autoheight.demo.vue
View File

@ -123,19 +123,16 @@ export default {
<div class="absolute-container">
<page-header title="表格高度自适应">
<template #content>
<p>TableHeightAdaption</p>
<p style="margin-bottom: 0;">该组件必须包裹 ElTable 使用，并且需要对上级元素设置高度后才会生效</p>
<p style="margin-bottom: 0;">该特性早期通过二次封装组件实现，现在则通过设置 el-table 组件的 height 为 100% 即可</p>
</template>
</page-header>
<page-main>
<TableHeightAdaption>
<el-table :data="dataList" border stripe highlight-current-row>
<el-table-column type="index" width="50" />
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</TableHeightAdaption>
<el-table :data="dataList" border stripe highlight-current-row height="100%">
<el-table-column type="index" width="50" />
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
<el-button type="primary">按钮</el-button>
</page-main>
</div>