Vue多种方法实现表头、首列固定

最新推荐文章于 2024-06-10 12:59:27 发布

ClydeKuo

最新推荐文章于 2024-06-10 12:59:27 发布

阅读量3.1w

点赞数 5

分类专栏：前端文章标签：固定表头 Vue-js 前端

本文链接：https://blog.csdn.net/ClydeKuo/article/details/53741755

版权

有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定，
上效果：
固定表头首列

一、创建多个表格进行覆盖

    思路：当页面滚动到临界值时，出现固定表头、首列
    先创建一个活动表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            th,
            td {
                min-width: 200px;
                height: 50px;
            }
            #sTable {
                margin-top: 300px }
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body v-cloak>
        <!--活动的表格-->
        <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>
        <script src="vue.js"></script>
        <script src="jquery.js"></script>
        <script>
            var vm = new Vue({
                el: "body",
                data: function() {
     
                    return {
                        th: [],
                        tl: [],
                        temp: [],
                    }
                },
                methods: {
                    //生成表格
                    CTable: function() {
     
                        for(var i = 0; i < 10; i++) {
                            this.th.push({
                                key: "head" + i
                            })
                        }
                        for(var i = 0; i < 100; i++) {
                            for(var j = 0; j < 10; j++) {
                                this.temp.push({
                                    key: j + "body" + i
                                })
                            }
                            this.tl.push(this.temp)
                            this.temp = []
                        }
                    },
                },
                ready: function() {
     
                    this.CTable();
                },
            })
        </script>
    </body>
</html>

再添加固定表头：

#fHeader {
    background: lightblue;
    position: fixed;
    top: 0;
}

<!--固定表头-->
<table border="1" id="fHeader" cellspacing="0" v-show="fixedHeader"> 
    <thead>
        <tr >
            <th v-for="item in th">{
   {
   item.key}}</th>
        </tr>
    </thead>
</table>

监控表格位置到达窗口顶部时出现固定表头

//监控表头位置
headerMonitor:function(){
   
    var self=this
    var hHeight=$("#sTable").offset().top;
    $(document).scroll(function(){
   
        //当滚动条达到偏移值的时候，出现固定表头
        <

最低0.47元/天解锁文章

ClydeKuo

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
Vue多种方法实现表头、首列固定

有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定，上效果：一、创建多个表格进行覆盖思路：当页面滚动到临界值时，出现固定表头、首列先创建一个活动表格<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>
复制链接

扫一扫