vue 原生table表格表头固定

Vue原生的table表格表头固定，可以通过CSS的position属性和JS的scroll事件来实现。

首先，在table标签外面嵌套一个div容器，设置其样式为position: relative，用于容纳表格和表头。

然后，在表格表头的tr标签上添加一个ref属性，用于在JS中获取该元素。

接下来，使用JS监听div容器的scroll事件，在事件中通过ref获取到表头元素，并获取该元素的offsetTop和scrollTop属性值。

然后，判断scrollTop是否大于或等于offsetTop，如果是则添加一个css类或样式，将表头固定在顶部；如果不是，则移除该类或样式。

最后，将改变样式的操作放在一个debounce的函数中，用于优化滚动事件的性能。

具体代码如下：

<template>
<div class="container" ref="container" @scroll="handleScroll">
<table class="table">
<thead>
<tr ref="thead">
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
...
</tbody>
</table>
</div>
</template>

<script>
export default {
methods: {
handleScroll() {
const container = this.$refs.container;
const thead = this.$refs.thead;

const offsetTop = thead.offsetTop;
const scrollTop = container.scrollTop;

if (scrollTop >= offsetTop) {
thead.classList.add("fixed");
} else {
thead.classList.remove("fixed");
}
},
},
};
</script>

<style>
.container {
position: relative;
max-height: 300px;
overflow-y: scroll;
}

.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}

.table {
width: 100%;
}

/* 省略其他样式 */
</style>

以上就是利用Vue原生实现table表格表头固定的方法。通过设置CSS样式和监听scroll事件，可以在滚动时使表头保持在页面顶部。