지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > php教程 > PHP开发 > 본문

Vue 고정 헤더, 고정 열, 헤더를 클릭하여 정렬할 수 있는 테이블 구성 요소

高洛峰
풀어 주다： 2016-12-05 11:16:51
원래의
1594명이 탐색했습니다.

원래 테이블의 지정된 행과 열을 복제하여 그 위에 놓는 것이 원칙입니다.

구현 코드는 다음과 같습니다. 

<template> 
 <div> 
  <div id="divBox1" :style="{height:height}"> 
   <table id="tbTest1" cellpadding="0" cellspacing="0" style="text-align:center;background:rgba(244,249,255,0.4);"> 
    <tr> 
     <th v-for="item in thead" @click="sortBy(item)"> 
      {{item}}<img style="width:0.16rem;height:0.20rem;margin-left:4px;" :src="filterUrl" alt="" v-if="$index!=0" data-img="{{filterUrl}}"> 
     </th> 
    </tr> 
    <tr v-for="row in tableRows | orderBy sortBykey sortOrders[sortKey]"> 
     <td style="overflow:hidden;white-space:nowrap;" v-for="item in gridColumns" v-html="row[item] | numberFilter" :id="$parent.$index"> 
     </td> 
    </tr> 
   </table> 
  </div> 
 </div> 
</template> 
<script> 
 /*eslint-disable*/
 var ofixed_table_st = window.setTimeout; 
 var hasLeft = &#39;&#39;; 
 var hasHead = &#39;&#39;; 
 window.setTimeout = function(fRef, mDelay) { 
  if(typeof fRef == &#39;function&#39;) { 
   var argu = Array.prototype.slice.call(arguments, 2); 
   var f = (function() { 
    fRef.apply(null, argu); 
   }); 
   return ofixed_table_st(f, mDelay); 
  } 
  return ofixed_table_st(fRef, mDelay); 
 }; 
 function oFixedTable(id, obj, _cfg) { 
  this.id = id; 
  this.obj = obj; 
  this.box = this.obj.parentNode; 
  this.config = { 
   fixHead: _cfg.fixHead || true, 
   rows: _cfg.rows || 1, 
   cols: _cfg.cols || 0, 
   background: _cfg.background || &#39;#ffffff&#39;, 
   zindex: _cfg.zindex || 10 
  }; 
  window.setTimeout(this._fixTable, 100, this); 
 } 
 oFixedTable.prototype._fixTable = function(_) { 
  if(_.obj.rows.length <= 0) { 
   return false; 
  } 
  var hasLeft = _.buildLeft(); 
  var hasHead = _.buildHead(); 
  _.box.onscroll = function() { 
   if(_.divHead != null) { 
    _.divHead.scrollLeft = this.scrollLeft; 
   } 
   if(_.divLeft != null) { 
    _.divLeft.scrollTop = this.scrollTop; 
   } 
  }; 
  if(hasHead && hasLeft) { 
   _.buildTopLeft(); 
  } 
 }; 
 oFixedTable.prototype.buildHead = function() { 
  console.log(2222222222222222222) 
  var _ = this; 
  var strDivId = _.id + &#39;_div_head&#39;; 
  var strTbId = _.id + &#39;_tb_header&#39;; 
  var div = document.createElement(&#39;div&#39;); 
  div.id = strDivId; 
  div.style.cssText = &#39;position:absolute;overflow:hidden;z-index:&#39; + (_.config.zindex + 1) + &#39;;&#39;; 
  div.innerHTML = &#39;<table id="&#39; + strTbId + &#39;" cellpadding="0" cellspacing="0" style="background:&#39; + _.config.background + &#39;;"></table>&#39;; 
  _.box.insertBefore(div, _.obj); 
  _.divHead = div; 
  _.tbHead = document.getElementById(strTbId); 
  //判断是否出现纵向滚动条，若出现，高度减去滚动条宽度 16px 
  var sw = _.obj.offsetHeight > _.box.offsetHeight ? 0 : 0; 
  _.divHead.style.width = (_.box.offsetWidth - sw) + &#39;px&#39;; 
  _.tbHead.style.textAlign = _.obj.style.textAlign; 
  _.tbHead.style.width = _.obj.offsetWidth + &#39;px&#39;; 
  var hasHead = false; 
  if(_.config.fixHead && _.obj.tHead != null) { 
   var tHead = _.obj.tHead; 
   _.tbHead.appendChild(tHead.cloneNode(true)); 
   hasHead = true; 
  } else { 
   for(var i = 0; i < _.config.rows; i++) { 
    var row = _.obj.rows[i]; 
    if(row != null) { 
     _.tbHead.appendChild(row.cloneNode(true)); 
     hasHead = true; 
    } 
   } 
  } 
  return hasHead; 
 }; 
 oFixedTable.prototype.buildLeft = function() { 
  var _ = this; 
  if(_.config.cols <= 0) { 
   return false; 
  } 
  var strDivId = _.id + &#39;_div_left&#39;; 
  var strTbId = _.id + &#39;_tb_left&#39;; 
  var div = document.createElement(&#39;div&#39;); 
  div.id = strDivId; 
  div.style.cssText = &#39;position:absolute;overflow:hidden;z-index:&#39; + _.config.zindex + &#39;;box-shadow: #dddddd 2px 0px 2px;width: 2rem;&#39;; 
  div.innerHTML = &#39;<table id=&#39; + strTbId + &#39; cellpadding="0" cellspacing="0" style="background:&#39; + _.config.background + &#39;;width: 2rem;"></table>&#39;; 
  _.box.insertBefore(div, _.obj); 
  _.divLeft = div; 
  _.tbLeft = document.getElementById(strTbId); 
  _.tbLeft.style.textAlign = _.obj.style.textAlign; 
  //判断是否出现横向滚动条，若出现，高度减去滚动条高度 16px 
  var sw = _.obj.offsetWidth > _.box.offsetWidth ? 0 : 0; 
  _.divLeft.style.height = (_.box.offsetHeight - sw) + &#39;px&#39;; 
  var hasLeft = false; 
  for(var i = 0, rows = _.obj.rows.length; i < rows; i++) { 
   var row = _.tbLeft.insertRow(_.tbLeft.rows.length); 
   row.style.cssText = _.obj.rows[i].style.cssText; 
   for(var j = 0; j < _.config.cols; j++) { 
    var cell = _.obj.rows[i].cells[j]; 
    if(cell != null) { 
     row.appendChild(cell.cloneNode(true)); 
     cell.style.cssText = _.obj.rows[i].cells[j].style.cssText; 
     hasLeft = true; 
    } 
   } 
  } 
  return hasLeft; 
 }; 
 oFixedTable.prototype.buildTopLeft = function() { 
  var _ = this; 
  var strDivId = _.id + &#39;_div_top_left&#39;; 
  var strTbId = _.id + &#39;_tb_top_left&#39;; 
  var div = document.createElement(&#39;div&#39;); 
  div.id = strDivId; 
  div.style.cssText = &#39;position:absolute;overflow:hidden;z-index:&#39; + (_.config.zindex + 2) + &#39;;box-shadow: #dddddd 2px 0px 2px;width: 2rem;&#39;; 
  div.innerHTML = &#39;<table id="&#39; + strTbId + &#39;" cellpadding="0" cellspacing="0" style="background:&#39; + _.config.background + &#39;;"></table>&#39;; 
  _.box.insertBefore(div, _.obj); 
  var tbTopLeft = document.getElementById(strTbId); 
  tbTopLeft.style.textAlign = _.obj.style.textAlign; 
  for(var i = 0; i < _.config.rows; i++) { 
   var row = tbTopLeft.insertRow(tbTopLeft.rows.length); 
   row.style.cssText = _.obj.rows[i].style.cssText; 
   for(var j = 0; j < _.config.cols; j++) { 
    var cell = _.obj.rows[i].cells[j]; 
    if(cell != null) { 
     row.appendChild(cell.cloneNode(true)); 
     cell.style.cssText = _.obj.rows[i].cells[j].style.cssText; 
     hasLeft = true; 
    } 
   } 
  } 
 }; 
 export default{ 
  // 接收父组件传过来的参数 
  props: [&#39;tableRows&#39;, &#39;gridColumns&#39;, &#39;thead&#39;, &#39;store&#39;, &#39;height&#39;, &#39;singleData&#39;], 
  // 监控 
  watch: { 
   &#39;tableRows&#39;: function (val) { 
    var self = this
    // 明星店铺页面时动态调整店铺名所在列的宽度s 
    if (self.store) { 
     document.querySelectorAll(&#39;table td:nth-child(3)&#39;)[0].style.width = 3 + &#39;rem&#39;
     document.querySelectorAll(&#39;table th:nth-child(3)&#39;)[0].style.width = 3 + &#39;rem&#39;
    } 
    var length = self.gridColumns.length 
    document.getElementById(&#39;tbTest1&#39;).style.width = 2 * length + &#39;rem&#39;
    setTimeout(function () { 
     if (self.singleData) { 
      document.getElementById(&#39;ofix1_tb_left&#39;).classList.add(&#39;ofix1_tb_left&#39;) 
     } 
     document.querySelectorAll(&#39;#ofix1_tb_left td&#39;)[0].style.width = 2 + &#39;rem&#39;
     var tbObj = document.getElementById(&#39;ofix1_tb_header&#39;) 
     tbObj.addEventListener(&#39;click&#39;,function (event) { 
      if(event.target.tagName === &#39;TH&#39;){ 
       self.sortBy(event.target.innerText, event) 
      } 
     }) 
    }, 101) 
   } 
  }, 
  data: function() { 
   var sortOrders = {} 
   this.gridColumns.forEach(function (key) { 
    sortOrders[key] = 1 
   }) 
   return { 
    sortKey: &#39;&#39;, 
    filterUrl: &#39;./static/img/indus/filter1.png&#39;, 
    sortOrders: sortOrders 
   } 
  }, 
  methods: { 
   sortBykey: function (a, b) { 
    return parseFloat(a[this.sortKey]) - parseFloat(b[this.sortKey]) 
    console.log(&#39;11111111111&#39;) 
   }, 
   sortBy: function (key, event) { 
    // 每一次排序之前所有的图片重置 
    var imgDom = document.querySelectorAll(&#39;#ofix1_tb_header th img&#39;) 
    for (var x = 0; x < imgDom.length; x++) { 
     imgDom[x].setAttribute(&#39;src&#39;, &#39;./static/img/indus/filter1.png&#39;) 
    } 
    // 排序 
    var activeTheadIndex = 0 
    for (var i = 0; i < this.thead.length; i++) { 
     if (this.thead[i] === key) { 
      activeTheadIndex = i 
     } 
    } 
    this.sortKey = this.gridColumns[activeTheadIndex] 
    this.sortOrders[this.gridColumns[activeTheadIndex]] = this.sortOrders[this.gridColumns[activeTheadIndex]] * -1 
    // 排序时同步改变标识图片 
    if (this.sortOrders[this.gridColumns[activeTheadIndex]] > 0) { 
     event.target.getElementsByTagName(&#39;img&#39;)[0].setAttribute(&#39;src&#39;, &#39;./static/img/indus/filter2.png&#39;) 
    } else { 
     event.target.getElementsByTagName(&#39;img&#39;)[0].setAttribute(&#39;src&#39;, &#39;./static/img/indus/filter3.png&#39;) 
    } 
    // 排序时同步改变左边第一列的内容 
    setTimeout(function(){ 
     var tdDom = document.querySelectorAll(&#39;#tbTest1 tr td:nth-child(1)&#39;) 
     var tdDomLeft = document.querySelectorAll(&#39;#ofix1_tb_left td&#39;) 
     for (var y = 0; y < tdDom.length; y++) { 
      tdDomLeft[y].innerHTML = tdDom[y].innerHTML 
     } 
    },0) 
   } 
  }, 
  filters: { 
   numberFilter: function (value) { 
    if (value == 0) { 
     return &#39;0&#39;
    } else if (!value) { 
     return &#39;/&#39;
    } else { 
     return value 
    } 
   } 
  }, 
  components: { 
  }, 
  ready: function() { 
   var ofix1 = new oFixedTable(&#39;ofix1&#39;, document.getElementById(&#39;tbTest1&#39;), { 
    rows: 1, 
    cols: 1 
   }) 
  }, 
  created () { 
  } 
 } 
</script> 
<style scoped>
 #divBox1{ 
  overflow:auto; 
  width:100%; 
  font-size: 0.28rem; 
 }
 #ofix1_div_left{ 
  box-shadow: #dddddd 2px 0px 2px; 
  width: 2rem; 
 } 
 table { 
  table-layout : fixed; 
 } 
 table td, 
 table th { 
  width: 2rem; 
  line-height: 1rem; 
  height: 1rem; 
  padding: 0; 
  color: #999999; 
  overflow: hidden; 
  white-space: nowrap; 
  /*vertical-align: middle;*/
 } 
 table th{ 
  background: rgba(188,219,255,0.4); 
  color: #999; 
  font-size: .28rem; 
  font-weight: normal; 
 } 
 table th:nth-child(1){ 
  box-shadow: #dddddd 2px 0px 0px; 
 } 
 .ofix1_tb_left tr td:nth-child(1){ 
  /*display: inline-block;*/
  text-align: left; 
 }
 #ofix1_div_top_left{ 
  box-shadow: #dddddd 2px 0px 2px; 
 }
 #tbTest1 tr td:nth-child(1){ 
  box-shadow: #dddddd 2px 0px 0px; 
 }
 #tbheader td { 
  background: #fff; 
 } 
</style>
로그인 후 복사

상위 컴포넌트 호출 예 : 

<template> 
   <table-locked :table-rows="tableData" :grid-columns="gridColumns" :thead="thead" :height="height"> 
   </table-locked> 
</template> 
import TableLocked from &#39;../../common/TableLocked.vue&#39;
export default{ 
  components: {TableLocked}, 
  data () { 
    data.gridColumns = [&#39;brand&#39;, &#39;product_count&#39;, &#39;averagePrice&#39;, &#39;sales&#39;, &#39;huang_sale_per&#39;, &#39;sale_per&#39;, &#39;sales_amount&#39;, &#39;huang_sale_amount_per&#39;, &#39;sales_amount_per&#39;, &#39;score_num&#39;, &#39;scort_good_per&#39;] 
   data.thead = [&#39;品类&#39;, &#39;产品种类&#39;, &#39;均价&#39;, &#39;销量&#39;, &#39;销量环比&#39;, &#39;销量占比&#39;, &#39;销额(万元)&#39;, &#39;销额环比&#39;, &#39;销额占比&#39;, &#39;评论总数&#39;, &#39;好评率&#39;] 
  } 
}
로그인 후 복사


관련 라벨：
vue
원천：php.cn
이전 기사：html 요소 속성을 정규식으로 바꾸는 방법 다음 기사：PHP 보안을 강화하기 위해 PHP의 일부 서버 측 기능을 구성하십시오.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...
에서 2024-04-06 18:10:25
0
2
513
로그인하지 않고 Firebase를 사용하여 Vue에서 사용자 만들기 사용자 프로필을 생성하기 위한 양식을 만들었습니다. 하지만 사용자를 만들 때마다 문제가 발생합니다. 로그인 및 로그아웃된 사용자입니다. 이 문제를 해결하는 데 도...
에서 2024-04-06 14:20:12
0
1
514
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
에서 2024-04-06 11:35:59
0
1
456
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿