思路：利用自定义指令监听滚动事件，实现表头固定
以下是网上看到的一个小例子：
<style>
.wrap{
height: 100px;
overflow: auto;
border: 1px solid #000;
}
tr{
height: 30px
}
</style>
<body>
<div id="app">
<div class="wrap" v-fixed>
<table>
<thead>
<tr>
<th>col first</th>
<th>col second</th>
<th>col third</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td></tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script>
Vue.directive('fixed', function(el){
el.οnscrοll=function(){
var scrollTop=el.scrollTop;
var thead=el.querySelector('thead');
thead.style.transform='translateY('+scrollTop+'px)';
};
});
var app=new Vue({
el: '#app'
});
</script>
</body>
926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
