foreword
For some commonly used management systems, one of the more commonly used layouts is the classic layout of sidebars, headers, feet, and theme parts, as shown in the figure below: If you place a table component in the Main part of the above 
figure , for user experience considerations, it is necessary to tile the width and height of the adaptive Main part of the table, that is, the table component completely covers the Main part, and a scroll bar needs to be displayed for user operation.
plan
plan 1
vxe-tableThe component itself has a heightproperty. heightThe property can be set by percentage %, or by px. In addition, it can be set to 'auto'. The official documentation 'auto'explains the setting as follows:
Support full parent container or fixed height, if set auto to full parent container (if set to auto, you must ensure that there is a parent node and no adjacent elements are allowed)
To be simple, you can directly vxe-tableset the components height="auto"to achieve the full effect. But it should be noted that height="auto"only the parent node can be guaranteed to be covered. For example, if the height of the parent node is 100px, it can only be covered with a height of 100px. For example, if the height of the parent node is 500px, it can only be covered with 500px. And when using it, the premise is that there can only be one component under the parent node , otherwise it will cause height calculation errors. vxe-table
In addition, it should be noted that height="auto"after setting, in some cases, the problem of virtual scrolling may be stuck, which may be caused by recalculating the height of the table during virtual scrolling, which will not be explained here.
The specific code is as follows:
<template>
<div
style="width: 100vw; height: 100vh; background-color: #eee; display: flex"
>
<div style="width: 150px">Aside</div>
<div style="width: calc(100vw - 150px)">
<div style="height: 60px; line-height: 60px; background-color: #ddd">
Header部分
</div>
<!-- 需要设置高度，保证父div铺满 -->
<div style="height: calc(100vh - 60px - 40px)">
<vxe-table border :data="tableData" height="auto">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-table>
</div>
<div style="height: 40px; line-height: 40px; background-color: #ddd">
Footer部分
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
};
},
mounted() {
var list = [];
for (var index = 0; index < 6000; index++) {
list.push({
name: `test-------${
index}`,
role: "developer",
sex: "Man",
date: "2019-05-01",
time: 1556677810888 + index * 500,
region: "ShenZhen",
address: `address-------${
index}`,
});
}
this.tableData = list;
},
};
</script>
The effect is as follows:
Code codesandbox address: https://codesandbox.io/s/vxe-table-height-adaptive-use-height-auto-fc0i5n?file=/src/views/Demo.vue
Demo address: https:// fc0i5n.csb.app/
Scenario 2
In fact, I don’t recommend the above option 1 very much. There are two reasons: 1. It will cause virtual scrolling to freeze; 2. The parent div is already full, so there is no need to vxe-tableset the component height="auto", just set it directly height="100%".
Compared with plan 1, the difference between this plan and plan 1 is that plan 1 is set to height="auto", and this plan is set to height="100%", nothing more, aha.
I personally recommend it height="100%", because not only the effect is the height="auto"same as the tiling effect, but also height="auto"the performance problems caused by it are avoided.
The specific code is as follows:
<template>
<div
style="width: 100vw; height: 100vh; background-color: #eee; display: flex"
>
<div style="width: 150px">Aside</div>
<div style="width: calc(100vw - 150px)">
<div style="height: 60px; line-height: 60px; background-color: #ddd">
Header部分
</div>
<!-- 需要设置高度，保证父div铺满 -->
<div style="height: calc(100vh - 60px - 40px)">
<!-- height设置成100% -->
<vxe-table border :data="tableData" height="100%">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-table>
</div>
<div style="height: 40px; line-height: 40px; background-color: #ddd">
Footer部分
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
};
},
mounted() {
var list = [];
for (var index = 0; index < 6000; index++) {
list.push({
name: `test-------${
index}`,
role: "developer",
sex: "Man",
date: "2019-05-01",
time: 1556677810888 + index * 500,
region: "ShenZhen",
address: `address-------${
index}`,
});
}
this.tableData = list;
},
};
</script>
Code codesandbox address: https://codesandbox.io/s/vxe-table-height-adaptive-e63djq?file=/src/views/Demo.vue:0-1395
Demo address: https://e63djq.csb.app /
conclusion
The above are vxe-tablethe two implementation methods of the adaptive height of the table component. If you have any questions or other ideas, you may wish to communicate in the comment area.