Vue多种方法实现表头和首列固定的示例代码

有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定， 上效果： 一、创建多个表格进行覆盖 思路：当页面滚动到临界值时，出现固定表头、首列 先创建一个活动表格 &lt;!DOCTYPE html> &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; th, td { min-width: 200px; height: 50px; } #sTable { 在网页设计中，当表格数据过多，导致用户滚动页面时，表头和首列的不可见会严重影响用户体验。为了改善这种情况，我们可以采用多种方法来实现表头和首列的固定。这里我们将探讨一种基于Vue.js的实现方式，通过创建多个表格进行覆盖，以达到固定效果。 创建一个活动表格，即用户滚动时会显示的完整表格。在HTML中，我们需要设置表格样式，确保单元格的宽度和高度，并为后续固定效果做准备。例如，可以设置`th`和`td`的最小宽度为200像素，高度为50像素。同时，添加`v-cloak`指令，防止Vue.js渲染过程中的闪烁现象。 ```html <table id="sTable" border="1" cellspacing="0"> <thead> <tr> <th v-for="item in th">{{item.key}}</th> </tr> </thead> <tbody> <tr v-for="item in tl"> <td v-for="list in item">{{list.key}}</td> </tr> </tbody> </table> ``` 接下来，定义Vue实例，用于存储数据和执行相关操作。创建一个名为`vm`的Vue对象，包含`th`（表头数据），`tl`（表格行数据）和`temp`（临时存储数据）的数据属性。同时，定义`CTable`方法来生成表格数据，以及`ready`方法在Vue实例加载完成后执行。 ```javascript var vm = new Vue({ el: "body", data: function() { return { th: [], tl: [], temp: [] }; }, methods: { CTable: function() { // ...生成表格数据的逻辑 } }, ready: function() { this.CTable(); } }); ``` 为了实现固定表头，我们创建一个新表格`fHeader`，并设置其样式为固定定位，背景颜色为浅蓝色。在Vue实例中，添加一个`fixedHeader`数据属性来控制固定表头的显示和隐藏，并创建`headerMonitor`方法监听表格位置，当表格顶部到达窗口顶部时，显示固定表头。 ```javascript // 监控表头位置 headerMonitor: function() { var self = this; var hHeight = $("#sTable").offset().top; $(document).scroll(function() { if ($(this).scrollTop() > hHeight) { self.fixedHeader = true; } else { self.fixedHeader = false; } }); } ``` 同样，对于固定首列和A1单元格，我们需要创建另外两个表格，分别设置相应的CSS样式和Vue数据属性`fixedCol`和`fixedA1`来控制它们的显示。这里的关键是使用`v-if`指令根据Vue数据属性的值来决定是否显示这些固定表格。 ```html <!-- 固定首列 --> <table border="1" cellspacing="0" class="fixedCol" v-show="fixedCol"> <thead> <tr> <th v-for="item in th" v-if="$index == 0">{{item.key}}</th> </tr> </thead> </table> <!-- 固定A1 --> <table border="1" cellspacing="0" class="fixedA1" v-show="fixedA1"> <thead> <tr> <th v-for="item in th" v-if="$index == 0">{{item.key}}</th> </tr> </thead> </table> ``` 在Vue实例的`ready`方法中，调用`headerMonitor`方法，确保页面加载完成后即可开始监听表格位置。 通过这种方式，我们可以实现Vue.js中表格的表头和首列固定，即使在表格内容滚动时，用户依然可以清晰地看到表头和首列，从而提高数据查看的便利性。这种方法利用了Vue.js的响应式数据绑定和事件监听功能，结合CSS的定位技术，实现了表格的动态效果。