vue3表格自适应高度

在Vue 3中实现表格的自适应高度可以通过多种方式来完成。以下是一些常见的方法：

使用CSS Flexbox：
通过Flexbox布局，可以轻松实现表格的自适应高度。首先，将表格容器设置为Flex容器，并设置其高度为视口高度或其他容器高度。然后，将表格的高度设置为100%。

<template>
<div class="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.field1 }}</td>
<td>{{ item.field2 }}</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
data() {
return {
items: [
{ id: 1, field1: 'Value 1', field2: 'Value 2' },
// ... more items
],
};
},
};
</script>

<style>
.table-container {
display: flex;
flex-direction: column;
height: 100vh; /* 或者其他容器的高度 */
}

table {
flex: 1;
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
}
</style>
登录后复制

使用JavaScript计算高度：
通过JavaScript动态计算表格容器的高度，并将其设置为表格的高度。

<template>
<div ref="tableContainer" class="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.field1 }}</td>
<td>{{ item.field2 }}</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
data() {
return {
items: [
{ id: 1, field1: 'Value 1', field2: 'Value 2' },
// ... more items
],
};
},
mounted() {
this.adjustTableHeight();
window.addEventListener('resize', this.adjustTableHeight);
},
beforeUnmount() {
window.removeEventListener('resize', this.adjustTableHeight);
},
methods: {
adjustTableHeight() {
const containerHeight = this.$refs.tableContainer.clientHeight;
this.$refs.tableContainer.style.height = `${containerHeight}px`;
},
},
};
</script>

<style>
.table-container {
width: 100%;
overflow: auto;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
}
</style>
登录后复制

使用第三方库：
使用像vue-virtual-scroll-list或vue-virtual-table这样的第三方库，可以更高效地实现表格的自适应高度，特别是在处理大量数据时。

<template>
<vue-virtual-scroll-list :size="50" :keeps="30" :data-key="'id'" :data-sources="items">
<template v-slot:default="{ item }">
<div class="item">
<span>{{ item.field1 }}</span>
<span>{{ item.field2 }}</span>
</div>
</template>
</vue-virtual-scroll-list>
</template>

<script>
import VueVirtualScrollList from 'vue-virtual-scroll-list';

export default {
components: {
VueVirtualScrollList,
},
data() {
return {
items: [
{ id: 1, field1: 'Value 1', field2: 'Value 2' },
// ... more items
],
};
},
};
</script>

<style>
.item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
</style>
登录后复制