Vue固定头固定列点击表头可排序的表格组件原理是将原table的指定⾏，指定列clone⼀份放在其上
实现代码如下：
<template>
<div>
<div id="divBox1" :>
<table id="tbTest1" cellpadding="0" cellspacing="0" >
<tr>
<th v-for="item in thead" @click="sortBy(item)">
{{item}}<img :src="filterUrl" alt="" v-if="$index!=0" data-img="{{filterUrl}}">
</th>
</tr>
<tr v-for="row in tableRows | orderBy sortBykey sortOrders[sortKey]">
<td v-for="item in gridColumns" v-html="row[item] | numberFilter" :id="$parent.$index">
</td>
</tr>
</table>
</div>
</div>
</template>
<script>typeof array
/*eslint-disable*/
var ofixed_table_st = window.setTimeout;
var hasLeft = '';
var hasHead = '';
window.setTimeout = function(fRef, mDelay) {
if(typeof fRef == 'function') {
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;
fixHead: _cfg.fixHead || true,
rows: _ws || 1,
cols: _ls || 0,
background: _cfg.background || '#ffffff',
zindex: _cfg.zindex || 10
};
window.setTimeout(this._fixTable, 100, this);
}
oFixedTable.prototype._fixTable = function(_) {
if(_.ws.length <= 0) {
return false;
}
var hasLeft = _.buildLeft();
var hasHead = _.buildHead();
_.scroll = 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 + '_div_head';
var strTbId = _.id + '_tb_header';
var div = ateElement('div');
div.id = strDivId;
div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + (_.config.zindex + 1) + ';';
div.innerHTML = '<table id="' + strTbId + '" cellpadding="0" cellspacing="0" ></table>';
_.box.insertBefore(div, _.obj);
_.divHead = div;
_.tbHead = ElementById(strTbId);
//判断是否出现纵向滚动条，若出现，⾼度减去滚动条宽度 16px
var sw = _.obj.offsetHeight > _.box.offsetHeight ? 0 : 0;
_.divHead.style.width = (_.box.offsetWidth - sw) + 'px';
_.Align = _.Align;
_.tbHead.style.width = _.obj.offsetWidth + 'px';
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 < _.ws; i++) {
var row = _.ws[i];
_.tbHead.appendChild(row.cloneNode(true));
hasHead = true;
}
}
}
return hasHead;
};
oFixedTable.prototype.buildLeft = function() {
var _ = this;
if(_.ls <= 0) {
return false;
}
var strDivId = _.id + '_div_left';
var strTbId = _.id + '_tb_left';
var div = ateElement('div');
div.id = strDivId;
div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + _.config.zindex + ';box-shadow: #dddddd 2px 0px 2px;width: 2rem;';
div.innerHTML = '<table id=' + strTbId + ' cellpadding="0" cellspacing="0" ></table>'; _.box.insertBefore(div, _.obj);
_.divLeft = div;
_.tbLeft = ElementById(strTbId);
_.Align = _.Align;
//判断是否出现横向滚动条，若出现，⾼度减去滚动条⾼度 16px
var sw = _.obj.offsetWidth > _.box.offsetWidth ? 0 : 0;
_.divLeft.style.height = (_.box.offsetHeight - sw) + 'px';
var hasLeft = false;
for(var i = 0, rows = _.ws.length; i < rows; i++) {
var row = _.tbLeft.insertRow(_.ws.length);
row.style.cssText = _.ws[i].style.cssText;
for(var j = 0; j < _.ls; j++) {
var cell = _.ws[i].cells[j];
if(cell != null) {
row.appendChild(cell.cloneNode(true));
cell.style.cssText = _.ws[i].cells[j].style.cssText;
hasLeft = true;
}
}
}
return hasLeft;
};
oFixedTable.prototype.buildTopLeft = function() {
var _ = this;
var strDivId = _.id + '_div_top_left';
var strTbId = _.id + '_tb_top_left';
var div = ateElement('div');
div.id = strDivId;
div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + (_.config.zindex + 2) + ';box-shadow: #dddddd 2px 0px 2px;width: 2rem;';
div.innerHTML = '<table id="' + strTbId + '" cellpadding="0" cellspacing="0" ></table>';
_.box.insertBefore(div, _.obj);
var tbTopLeft = ElementById(strTbId);
Align = _.Align;
for(var i = 0; i < _.ws; i++) {
var row = tbTopLeft.ws.length);
row.style.cssText = _.ws[i].style.cssText;
for(var j = 0; j < _.ls; j++) {
var cell = _.ws[i].cells[j];
if(cell != null) {
row.appendChild(cell.cloneNode(true));
cell.style.cssText = _.ws[i].cells[j].style.cssText;
hasLeft = true;
}
}
}
};
export default{
// 接收⽗组件传过来的参数
props: ['tableRows', 'gridColumns', 'thead', 'store', 'height', 'singleData'],
// 监控
watch: {
'tableRows': function (val) {
var self = this
// 明星店铺页⾯时动态调整店铺名所在列的宽度s
if (self.store) {
document.querySelectorAll('table td:nth-child(3)')[0].style.width = 3 + 'rem'
document.querySelectorAll('table th:nth-child(3)')[0].style.width = 3 + 'rem'
}
var length = idColumns.length
setTimeout(function () {
if (self.singleData) {
}
document.querySelectorAll('#ofix1_tb_left td')[0].style.width = 2 + 'rem'
var tbObj = ElementById('ofix1_tb_header')
tbObj.addEventListener('click',function (event) {
if(event.target.tagName === 'TH'){
self.sortBy(event.target.innerText, event)
}
})
}, 101)
}
},
data: function() {
var sortOrders = {}
})
return {
sortKey: '',
filterUrl: './static/img/indus/filter1.png',
sortOrders: sortOrders
}
},
methods: {
sortBykey: function (a, b) {
return parseFloat(a[this.sortKey]) - parseFloat(b[this.sortKey])
console.log('11111111111')
},
sortBy: function (key, event) {
// 每⼀次排序之前所有的图⽚重置
var imgDom = document.querySelectorAll('#ofix1_tb_header th img')
for (var x = 0; x < imgDom.length; x++) {
imgDom[x].setAttribute('src', './static/img/indus/filter1.png')
}
// 排序
var activeTheadIndex = 0
for (var i = 0; i < this.thead.length; i++) {
if (this.thead[i] === key) {
activeTheadIndex = i
}
}
this.sortKey = idColumns[activeTheadIndex]
this.idColumns[activeTheadIndex]] = this.idColumns[activeTheadIndex]] * -1 // 排序时同步改变标识图⽚
if (this.idColumns[activeTheadIndex]] > 0) {
ElementsByTagName('img')[0].setAttribute('src', './static/img/indus/filter2.png')
} else {
ElementsByTagName('img')[0].setAttribute('src', './static/img/indus/filter3.png')
}
// 排序时同步改变左边第⼀列的内容
setTimeout(function(){
var tdDom = document.querySelectorAll('#tbTest1 tr td:nth-child(1)')
var tdDomLeft = document.querySelectorAll('#ofix1_tb_left td')
for (var y = 0; y < tdDom.length; y++) {
tdDomLeft[y].innerHTML = tdDom[y].innerHTML
}
},0)
}
},
filters: {
numberFilter: function (value) {
if (value == 0) {
return '0'
} else if (!value) {
return '/'
} else {
return value
}
}
},
components: {
},
ready: function() {
var ofix1 = new oFixedTable('ofix1', ElementById('tbTest1'), {
rows: 1,
cols: 1
})
},
created () {
}
}
</script>
<style lang="scss" 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 '../../common/TableLocked.vue'
export default{
components: {TableLocked},
data () {
}
}
以上所述是⼩编给⼤家介绍的Vue 固定头固定列点击表头可排序的表格组件，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论