Vue 여러 가지 방법 으로 헤더 와 첫 번 째 열 에 고정된 예제 코드 를 실현 합 니 다.

16858 단어 vue표면고정했어
때로는 표 가 너무 커서 스크롤 할 때 정보 보기 가 불편 하고 표 의 전체 헤더,첫 번 째 열 을 고정 시 켜 야 합 니 다.
위의 효과:

1.여러 개의 표를 만들어 서 덮어 씁 니 다.
사고방식:페이지 가 임계값 으로 굴 러 갈 때 고정된 헤더,첫 번 째 열 이 나타 납 니 다
이벤트 표 만 들 기

<!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())
}
Jq 모니터링 스크롤 새 여러 표 구현 표 첫 번 째 열 고정.html
2.제어 스타일 은 고정 헤더,첫 번 째 열 을 실현 합 니 다.
사고:표 가 임계값 에 이 르 렀 을 때 표 머리,첫 번 째 열 스타일 을 바 꿉 니 다.
우선 표 두 고정 실현

<!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()
  },
},
양식 을 바 꾸 어 고정 헤더 의 첫 번 째 열 을 실현 합 니 다.html
3.Vue 사용자 정의 명령 으로 스크롤 감청 실현
vue 를 사용 할 때 Jq 와 같은 방대 한 라 이브 러 리 를 사용 하지 않 을 뿐만 아니 라 vue 정부 에서 도 Dom 요 소 를 조작 하 는 것 을 추천 하지 않 기 때문에 명령 을 사용자 정의 하여 고정 헤더,첫 번 째 열 을 실현 할 수 있 습 니 다.본 고 는 Vue.js v 1.0.26 을 사 용 했 지만 V 2.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 
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
express+multer 를 사용 하여 node 의 이미지 업로드 기능 을 실현 합 니 다.
jquery.picsign 그림 레이 블 구성 요소 인 스 턴 스 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage