首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 02, 2018

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

上效果：

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

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

思路：当页面滚动到临界值时，出现固定表头、首列

先创建一个活动表格

<!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(){
    //当滚动条达到偏移值的时候，出现固定表头
    if($(this).scrollTop()>hHeight){
      self.fixedHeader=true
    }else{
      self.fixedHeader=false
    }

  })
}

当然需要调用该方法

ready: function() {
  this.CTable();
  this.headerMonitor()
},

然后添加固定首列以及固定的A1单元格

#fHeader {
  background: lightblue;
    position: fixed;
    top: 0;
    z-index: 1;
  }
  .fixedA1{
    background: lightblue;
    position: fixed;
    top: 0;
    left: 0;
    z-index:2;
  }
<!--固定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>
<!--固定首列-->
<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>
  <tbody>
    <tr v-for="item in tl">
      <td v-for="list in item" v-if="$index==0">{{list.key}}</td>
    </tr>
  </tbody>
</table >

同理监控表格的位置

//监控表头、首列位置
monitor:function(){
  var self=this
  $(document).scroll(function(){
    self.setPosition()
    //当滚动条达到左偏移值的时候，出现固定列头
    if($(this).scrollLeft()>self.hLeft){
      self.fixedCol=true
    }else{
      self.fixedCol=false
    }
    //当滚动条达到上偏移值的时候，出现固定表头
    if($(this).scrollTop()>self.hHeight){
      self.fixedHeader=true
    }else{
      self.fixedHeader=false
    }
    //当表格移到左上角时，出现固定的A1表格
    if($(this).scrollLeft()>self.hLeft&&$(this).scrollTop()>self.hHeight){
      self.fixedA1=true
    }else{
      self.fixedA1=false
    }
  })
},

因为表格的移动会影响表头的位置的定位位置，因此需要将当前表格的偏移值赋给固定表头。首列

setPosition:function(){
  $("#fHeader").css("left",this.hLeft-$(document).scrollLeft())
  $(".fixedCol").css("top",this.hHeight-$(document).scrollTop())
}

二、控制样式实现固定表头，首列

思路：当表格达到临界值时，改变表头，首列的样式

首先实现表头固定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      th,
      td {
        min-width: 200px;
        height: 50px;
      }
      table {
        margin: 300px
      }
      .fHeader {
        background: lightblue;
        position: fixed;
        top: 0;
      }
      [v-cloak]{
        display: none;
      }
    </style>
  </head>
  <body v-cloak>
    <table border="1" cellspacing="0">
      <thead>
        <tr :class="{fHeader:fixedHeader}">
          <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: [],
            fixedHeader: false,
          }
        },
        methods: {
          //生成表格，代码相同，省略
          CTable: function() {},
          //监控表头位置
          headerMonitor:function(){
            var self=this
            var hHeight=$("table").offset().top;
            $(document).scroll(function(){
              //当滚动条达到偏移值的时候，出现固定表头
              if($(this).scrollTop()>hHeight){
                self.fixedHeader=true
              }else{
                self.fixedHeader=false
              }
            })
          }
        },
        ready: function() {
          this.CTable();
          this.headerMonitor()
        },
      })
    </script>
  </body>
</html>

添加固定首列

.fixedCol>:first-child{
  background: lightblue;
  position: fixed;
  z-index: 1;
  border:1px solid grey;
  left: 0;
  line-height: 50px;
}

监控表格位置

//监控表头，首列位置
monitor:function(){
  this.setPosition()
  var self=this
  $(document).scroll(function(){
    self.setPosition();
    //当滚动条达到偏移值的时候，出现固定表头
    if($(this).scrollTop()>self.hHeight){
      self.fixedHeader=true;
    }else{
      self.fixedHeader=false
    }
    //当滚动条达到左偏移值的时候，出现固定列头
    if($(this).scrollLeft()>self.hLeft){
      self.fixedCol=true
    }else{
      self.fixedCol=false
    }
    //当表格移到左上角时，出现固定的A1表格
    if($(this).scrollLeft()>self.hLeft&&$(this).scrollTop()>self.hHeight){
      self.fixedA1=true
    }else{
      self.fixedA1=false
    }
  })
},

设置偏移值

//使固定表头与列头的偏差与当前表格的偏移值相等
setPosition:function(){
  $(".fixedHeader").css("left",this.hLeft-$(document).scrollLeft())
  for(var i=0,len=this.tl.length+1;i<len;i++){
    //因为设置了“border-collapse:collapse”，所以要加“54-1”
    $(".fixedCol>:first-child").eq(i).css("top",this.hHeight-$(document).scrollTop()+53*i)
  }
}

因为当表头变成fixed定位时会脱离文档流，表格的第二行会被隐藏，所以需要多第二列进行宽高的拓展

/*因为fixed定位不占位，当固定表头出现时，有一行会补到表头位置，即有一行跳空,将tbody的第一行行高加倍*/
.fixedHeaderGap:first-child>td{
    padding-top:54px;
  }
/*因为fixed定位不占位，当固定列头出现时，有一列会补到列头位置，即有一列跳空,将tbody的第二列p设置padding*/
.fixedCol>:nth-child(2){
  padding-left: 205px;
}

当再次浏览器打开时该页面时，需要监控表格是否还达到固定表头的临界条件

watch:{
  //页面初始加载时，使固定表头与列头的偏差与当前表格的偏移值相等
  "fixedHeader":function(){
    this.setPosition()
  },
  "fixedCol":function(){
    this.setPosition()
  },
},

三、Vue自定义指令实现滚动监听

当使用vue时，就很少会用到Jq这么庞大的库，而且vue官方也不推荐操作Dom元素，因此可以自定义指令实现固定表头，首列。本文用的是Vue.js v1.0.26，但V2.0的思路其实也一样。

直接上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      th,
      td {
        min-width: 200px;
        height: 50px;
      }
      #sTable {
        margin: 300px
      }
      .fixedCol{
        position: fixed;
        left: 0;
        background: lightblue;
        z-index: 1;
      }
      #fHeader {
        background: lightblue;
        position: fixed;
        top: 0;
        z-index: 1;
      }
      .fixedA1{
        background: lightblue;
        position: fixed;
        top: 0;
        left: 0;
        z-index:2;
      }
      [v-cloak]{
        display: none;
      }
    </style>
  </head>
  <body v-cloak>
    <!--固定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>
    <!--固定列头-->
    <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>
      <tbody>
        <tr v-for="item in tl">
          <td v-for="list in item" v-if="$index==0">{{list.key}}</td>
        </tr>
      </tbody>
    </table >
    <!--固定表头-->
    <table border="1" id="fHeader" cellspacing="0" v-show="fixedHeader"> 
      <thead>
        <tr >
          <th v-for="item in th">{{item.key}}</th>
        </tr>
      </thead>
    </table>
    <!--活动的表格,绑定自定义指令-->
    <table id="sTable" border="1" cellspacing="0" v-scroll>
      <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>
      var vm = new Vue({
        el: "body",
        data: function() {
          return {
            th: [],
            tl: [],
            temp: [],
            fixedCol: false,
            fixedHeader:false,
            fixedA1:false,
            hLeft:0,
            hHeight:0,
          }
        },
        directives:{
          scroll:{
            bind:function(){
              //触发滚动监听事件
              window.addEventListener('scroll',function(){
                this.vm.monitor()
              })
            }
          }
        },
        methods: {
          //生成表格
          CTable: function() {},
          //监控表头、列头位置
          monitor:function(){
            this.setPosition();
            //当滚动条达到左偏移值的时候，出现固定列头
            if(document.body.scrollLeft>this.hLeft){
              this.fixedCol=true;
            }else{
              this.fixedCol=false;
            }
            //当滚动条达到上偏移值的时候，出现固定表头
            if(document.body.scrollTop>this.hHeight){
              this.fixedHeader=true;
            }else{
              this.fixedHeader=false;
            }
            //当表格移到左上角时，出现固定的A1表格
            if(document.body.scrollLeft>this.hLeft&&document.body.scrollTop>this.hHeight){
              this.fixedA1=true;
            }else{
              this.fixedA1=false;
            }
          },
          //使固定表头与列头的偏差与当前表格的偏移值相等
          setPosition:function(){
            document.getElementById("fHeader").style.left=this.hLeft-document.body.scrollLeft+"px";
            document.getElementsByClassName("fixedCol")[0].style.top=this.hHeight-document.body.scrollTop+"px";
          },
        },
        ready: function() {
          this.CTable();
          this.hLeft=document.getElementById("sTable").offsetLeft;
          this.hHeight=document.getElementById("sTable").offsetTop
          this.monitor()
        },
      })
    </script>
  </body>
</html>

若想要做成自定义回调事件，可以用eval(),

<table id="sTable" border="1" cellspacing="0" v-scroll="monitor">
directives:{
  scroll:{
    bind:function(){
      var self=this;
      //触发滚动监听事件
      window.addEventListener('scroll',function(){
        //触发滚动回调事件
        eval("self.vm."+self.expression)()
      })
    }
  }
},

自定义回调指令固定表列头.html 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

ClydeKuo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
vue实现树状表格效果
Dec 29 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
使用webpack打包koa2 框架app
Feb 02 #Javascript
Vue组件化开发思考
Feb 02 #Javascript
微信小程序实现导航栏选项卡效果
Jun 19 #Javascript
解析Vue.js中的组件
Feb 02 #Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 #Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 #Javascript
自定义组件(1) Vue(10) vue-router-link(1) TimePickerView(1) KVM(1) 本地化存储(1) Jmerte(1) Storage(1) click(1) Yolov5(1)
You might like
一棵php的类树(支持无限分类)
2006/10/09 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP实现百度人脸识别
2019/05/06 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
更优雅的事件触发兼容
2011/10/24 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
在Python中使用模块的教程
2015/04/27 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python的UTC时间转换讲解
2019/02/26 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
美丽的珠宝配饰：SmallThings
2019/09/04 全球购物
小学生美德少年事迹
2014/02/02 职场文书
自主招生自荐信指南
2014/02/04 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
美食节目策划方案
2014/05/31 职场文书
邀请函样本
2015/02/02 职场文书
辞职信标准格式
2015/02/27 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python