// 表头固定,超过一定高度,table除表头部分外显示滚动条
<template>
<div>
<table>
<thead :class="dataHeight > 400 ? 'thead' : '']">
<tr class="bgtit">
<th width="18%">A</th>
<th width="22%">B</th>
<th width="22%">C</th>
<th width="18%">D</th>
<th width="20%">E</th>
</tr>
</thead>
<tbody ref="table" :class="[dataHeight > 400 ? 'tbody' : '']">
<td width="18%">A</td>
<td width="22%">B</td>
<td width="22%">C</td>
<td width="18%">D</td>
<td width="20%">E</td>
</tbody>
</table>
</div>
</template>
<script>
export default{
name:'demo',
data() {
return {
dataHeight :0
}
},
watch: {
allData: function () {
this.$nextTick(function () {
console.log(this.$refs.table.offsetHeight);
this.dataHeight = this.$refs.table.offsetHeight;
});
},
},
}
</script>
<style scoped>
/* 设置滚动属性 */
.initialCondition tbody {
display: block;
/* max-height: 150px; */
/* overflow-y: scroll; */
}
/*设置头与内容自动对齐*/
.initialCondition table thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
/*给滚动条预留宽度*/
.initialCondition table thead {
/* width: calc( 100% - 0.6em); */
background: #eff0f5;
}
.tbody {
max-height: 350px;
overflow-y: scroll;
}
.thead {
width: calc(100% - 0.6em) !important;
}
</style>
表格表头固定,超过一定高度,除表头部分显示滚动条(Vue)
最新推荐文章于 2023-05-17 14:13:12 发布