效果图
templete
<template>
<div v-autoHeight="6" ref="height" class="table">
<table>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td v-text="item.id"></td>
<td v-text="item.name"></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import autoHeight from "./components/minHeight.js";
import { ref } from "vue";
export default {
directives: {
autoHeight,
},
setup(props) {
const list = ref([
{ id: 1, name: "23" },
{ id: 2, name: "阿达水电费" },
{ id: 3, name: "asdfasfwe" },
{ id: 4, name: "阿斯顿发" },
{ id: 5, name: "阿斯顿发" },
{ id: 6, name: "asdfasfwe" },
{ id: 7, name: "asdfasfwe" },
{ id: 8, name: "阿斯顿发" },
{ id: 9, name: "asdfasfwe" },
{ id: 10, name: "阿斯顿发" },
{ id: 11, name: "asdfasfwe" },
{ id: 12, name: "阿斯顿发" },
]);
return {
list,
};
},
};
</script>
<style lang="less" scoped>
.table {
width: 100%;
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
thead {
tr {
th {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-weight: 500;
line-height: 40px;
border: 1px solid #eaeef5;
background-color: #eaeef5;
}
}
}
tbody {
tr {
text-align: center;
td {
font-family: "楷体";
font-size: 15px;
border: 1px solid #eaeef5;
line-height: 40px;
word-break: break-all;
}
}
}
}
}
</style>
自定义高度
function autoHeight(el, binding, vnode) {
let length = Number(binding.value) > 0 ? Number(binding.value) : 1
let table = el.children[0]
let tabTop = table.children[0].children[0]
let tabBot = table.children[1].children
// 解决下面突出问题
let minHeight = tabTop.offsetHeight+1;
// 若是内容null
if (tabBot.length === 0) return
// 获取第一个长度
tabBot.forEach((item, index) => {
if (index < length) {
minHeight += item.getBoundingClientRect(true).height
}
});
// 设置样式
el.style.height = minHeight + 'px';
el.style.overflowY = 'auto'
}
export default {
mounted(el, binding, vnode) {
autoHeight(el, binding, vnode)
},
updated(el, binding, vnode) {
autoHeight(el, binding, vnode)
},
}