思路:使用antd自带固钉的功能获取表头是否需要绝对定位,获取列表数据的获取宽度,返回一个数组,赋值给表头的每一项。通过自定义指令监听窗口变化,进行表头更新。
mian.js resize 全局指令
Vue.directive('resize', {
bind(el, binding) {
let width = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width) {
binding.value();
}
width = style.width;
}
el.__vueSetInterval__ = setInterval(isReize, 500);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
});
Vue.directive('scroll', {
bind: function(el, binding) {
let f = function(evt) {
if (binding.value(evt, el)) {
el.removeEventListener('scroll', f)
}
}
el.addEventListener('scroll', f, true)
}
});
页面
<div style="height:3px;margin-top:40px">
<a-affix @change="affixChange" style="z-index:-1;" ref="myAffix"></a-affix>
</div>
<a-table ref="table" rowKey="id" class="fixed-table" v-resize="resize" v-scroll="tableScroll" :columns="columns" :dataSource="dataSource"></a-table>
js
tableScroll(e){
let thead = document.querySelector('.fixed-table .ant-table-thead > tr');
thead.style.marginLeft = `-${(e.srcElement.scrollLeft).toFixed(2)}px`
},
resize() {
let arr = fixedTableHeader()
fixedTableHeader(2,arr)
},
affixChange(e){
fixedTable(e)
},
loadData(arg) {
this.loading = true
if (arg === 1) {
this.ipagination.current = 1
}
let params = this.getQueryParams() //查询条件
params.userId = this.userId;
getAllFundsList(params).then((res) => {
if (res.success) {
this.dataSource = res.data.records
this.ipagination.total = res.data.total
// 数据更新重新获取以免表格宽度发生改变而错位
this.$nextTick(() => {
this.resize();
})
}
})
.finally(() => {
this.loading = false
})
}
全局获取宽度和赋值
export function fixedTableHeader(type = 1, widthArr = []) {
let arr = [];
if (document.querySelector('.fixed-table .ant-table-layout-fixed')) {
if (type == 1) {
let row = document.querySelector('.fixed-table .ant-table-fixed .ant-table-tbody .ant-table-row');
if (!row) {
return false;
}
let lis = row.getElementsByTagName('td');
lis = Array.from(lis);
lis.forEach((item, index) => {
let wid = parseFloat(window.getComputedStyle(item)['width']).toFixed(2);
arr.push(wid);
})
return arr;
} else {
// ant-table-scroll
let thead = document.querySelector('.fixed-table .ant-table-scroll .ant-table-thead');
let lis = thead.getElementsByTagName('th');
lis = Array.from(lis);
lis.forEach((item, index) => {
thead.getElementsByTagName('th')[index].style.width = `${widthArr[index]}px`;
});
// 左侧固定宽度设置
let left = document.querySelector('.fixed-table .ant-table-fixed-left .ant-table-thead');
if (left) {
let leftLis = left.getElementsByTagName('th');
leftLis = Array.from(leftLis);
leftLis.forEach((item, index) => {
left.getElementsByTagName('th')[index].style.width = `${widthArr[index]}px`;
})
}
// 右侧固定设置
let right = document.querySelector('.fixed-table .ant-table-fixed-right .ant-table-thead');
if (right) {
let rightLis = right.getElementsByTagName('th');
rightLis = Array.from(rightLis);
let star = widthArr.length - rightLis.length;
rightLis.forEach((item, index) => {
let subscript = (index + star);
right.getElementsByTagName('th')[index].style.width = `${widthArr[subscript]}px`;
})
}
// 点击下拉变为0问题
let icon = document.querySelector('.fixed-table .ant-table-scroll .ant-table-fixed colgroup .ant-table-expand-icon-col');
if (icon) {
icon.style.width = `50px`;
}
let selection = document.querySelector('.fixed-table .ant-table-scroll .ant-table-fixed colgroup .ant-table-selection-column');
if (selection) {
selection.style.width = `50px`;
}
}
} else {
if (type == 1) {
let row = document.querySelector('.fixed-table .ant-table-tbody .ant-table-row');
if (!row) {
return false;
}
let lis = row.getElementsByTagName('td');
lis = Array.from(lis);
lis.forEach((item, index) => {
// row.getElementsByTagName('td')[index].style.width;
let wid = parseFloat(window.getComputedStyle(item)['width']).toFixed(2);
arr.push(wid);
});
return arr;
} else {
let thead = document.querySelector('.fixed-table .ant-table-thead');
let lis = thead.getElementsByTagName('th')
lis = Array.from(lis)
lis.forEach((item, index) => {
thead.getElementsByTagName('th')[index].style.width = `${widthArr[index]}px`;
});
// 点击下拉变为0问题
let icon = document.querySelector('.fixed-table .ant-table-scroll colgroup .ant-table-expand-icon-col');
if (icon) {
icon.style.width = `50px`;
}
let selection = document.querySelector('.fixed-table .ant-table-scroll colgroup .ant-table-selection-column');
if (selection) {
selection.style.width = `50px`;
}
// footer
let footer = document.querySelector('.fixed-table .ant-table-footer');
if (footer) {
let flis = footer.querySelector('.ant-table-body').getElementsByTagName('td');
flis = Array.from(flis);
flis.forEach((item, index) => {
footer.querySelector('.ant-table-body').getElementsByTagName('td')[index].style.width = `${widthArr[index]}px`;
});
}
}
}
}
export function fixedTable(e, type = 1) {
let table = document.querySelector('.fixed-table');
let thead = document.querySelector('.fixed-table .ant-table-thead');
let theadTr = document.querySelector('.fixed-table .ant-table-thead > tr');
let left = document.querySelector('.fixed-table .ant-table-fixed-left .ant-table-thead');
let right = document.querySelector('.fixed-table .ant-table-fixed-right .ant-table-thead');
if (e) {
if (type == 1) {
thead.style.width = parseFloat(window.getComputedStyle(thead)['width']) + 'px';
thead.style.position = 'fixed';
thead.style.top = '80px';
thead.style.zIndex = 3;
} else {
theadTr.style.width = parseFloat(window.getComputedStyle(thead)['width']) + 'px';
theadTr.style.display = 'block';
thead.style.zIndex = 1;
thead.style.position = 'fixed';
thead.style.top = '80px';
thead.style.overflow = 'hidden';
thead.style.width = parseFloat(window.getComputedStyle(table)['width']) + 'px';
}
if (left) {
left.style.position = 'fixed';
left.style.top = '80px';
left.style.zIndex = 10;
}
if (right) {
right.style.position = 'fixed';
right.style.top = '80px';
right.style.zIndex = 10;
}
let arr = fixedTableHeader();
fixedTableHeader(2, arr);
} else {
thead.style.position = 'relative';
thead.style.top = 0;
thead.removeAttribute('z-index');
theadTr.style.display = 'table-row'
if (left) {
left.style.position = 'relative';
left.style.top = 0;
left.removeAttribute('z-index');
}
if (right) {
right.style.position = 'relative';
right.style.top = 0;
right.removeAttribute('z-index');
}
}
}