antdv table 表头固钉

已于 2022-07-04 15:59:51 修改
阅读量1.3k 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-06-16 11:50:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiLL123/article/details/125313333
版权
该博客介绍了如何在Vue中利用Ant Design Vue的固钉功能和自定义指令来实现表格表头的动态宽度设置。当窗口尺寸变化或滚动时，表头会根据内容宽度自动调整，确保布局正确。主要涉及的技术包括Vue指令、窗口监听、CSS样式计算以及Ant Design Vue组件的API应用。
摘要由CSDN通过智能技术生成
思路：使用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');
        }
    }
}
淺笑輕吟夢壹曲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant design vue table 高度自适应_element Table组件固定表头且高度自适应
weixin_39603132的博客
11-21 1706
问题element是vue功能比较全的后台管理系统UI，但是已经不维护了，在一些细节上还是有一点问题，项目中遇到一点问题，如下图：当出现横向滚动条的时候，滚动条在下方，向右滑动的时候表头就看不到了解决方案1、出现超宽和超高的列有可能是某个单元框文字太多可以加一个 :show-overflow-tooltip="true"，超宽以后就会显示...，然后会加一个hover的tips2、Table组件提...
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
qq_46490956的博客
09-04 2362
antdesign-vue table设置固定表头和列（就是横向滚动+纵向滚动）后滚动条消失（项目框架用的是snowy小诺）
【源码分析系列】antdv table滚动时固定表头
最新发布
未来可期
11-02 1640
学习antd table滚动固定头部的指令源码
table 固定表头
weixin_51666715的博客
03-16 1397
可以直接通过给组件一个最大高度然后通过穿透获取thead使用·position:sticky·固定头部即可。
react antd 表格头固定
web_cgh的博客
07-09 1382
react中，使用antd布局table，使table头部固定不动。
ant design table表格头部固定方法(React)
iam671的博客
07-24 6102
在使用table时，当数据量太大的时候可能会需要头部固定(数据滚动时表格的头部固定)
html Table 表头固定的实现
09-22
首先，我们需要为表头定义一个CSS类，比如这里的.table-head，然后为其设置固定的高度和背景颜色，确保它在视觉上与表格主体（.table-body）有所区分。重要的是，给这个表头添加一个合适的padding-right样式。这个...
layui中table表头样式修改方法
10-18
在本文中，我们将深入探讨如何在layui框架中修改table组件的表头样式。layui是一款流行的前端UI框架，它提供了一套完整的模块化解决方案，包括表格（table）在内的各种组件，帮助开发者快速构建美观且功能丰富的网页...
浅析响应式框架中，table表头自动换行的快速解决方法
09-28
然而，在使用这些框架处理表格（table）时，尤其是在移动端，可能会遇到一个问题：表头（thead）内容因为屏幕宽度限制而自动换行，这不仅影响了美观，也可能降低用户的阅读体验。本文将探讨如何快速解决这个问题。 ...
table表头及列固定
10-17
本文将深入探讨如何使用`table`元素，并结合jQuery实现表头及列的固定，以便在滚动时保持关键信息可见，提高用户体验。 首先，让我们了解`table`的基本结构。一个`table`由`<table>`标签开启，`</table>`标签关闭。...
Ant Design Vue Table 表格内容高度自适应+固定表头踩坑
三劫散仙
11-01 7775
对于非专业前端开发者来使用 Ant Design UI 组件来开发企业级后台管理系统来说是非常不错的选择，但这并不意味着我们能够用好这个框架，因为 UI 交互上和有许多细节上的问题对于非专业前端来说并不容易解决，最近在使用 Table 组件时就遇到一个小坑，特此记录一下解决的方法。
ant design vue table 高度自适应_再谈table组件：固定表头和表列
weixin_39970823的博客
11-21 3284
前言 Github原文：github.com/qiud... 本文介绍内容包括：1. Element UI 实现表头表列固定思考与总结2. translate3d如何实现表头表列固定 书承上文，在前文【Vue进阶】青铜选手，如何自研一套UI库中介绍了Vue组件库的开发细节，举例实现了button、table等组件的开发。在Ange这个UI库中，我实现了一个内容高可定制的表格组件：可固定表头和表列，...
ant design vue中a-table固定头和列后出现行内容不对齐的情况
weixin_42043532的博客
02-19 5029
如图所示，在固定头和列后出现了几个问题，查看原因后得知是表格下部出现滚动条导致的，所以我把左右固定列的高度减去滚动条的高度就可以解决这个问题 mounted () { // this.h = document.querySelector('.ptp-layout-main').offsetHeight - 45 const _this = this var tableBodyInnerNodeList = document.querySelectorAll('.ant-table-body-.
【样式问题】Antd Table【表格】实现表头固定时，与内容不对齐问题
窝窝头的博客
05-17 8839
目录： 版本说明 问题 问题分析 解决办法 一、版本说明 "ant-design-vue": "^1.3.5" 二、问题描述如下 2.1、按照官网设置过以下属性值，发现可以滚动，但是与内容错位啦 :scroll="{x: 1200, y: 720}" 三、原因分析： 3.1、查看官方文档，这里，发现文档的提示如下： 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。 如果指定 width 不生效或出现白色垂直空隙， 请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段
vue2+ant-design-vue a-table滚动鼠标时固定表头
zhongxiajiu的博客
07-19 1047
【代码】vue2+ant-design-vue a-table滚动鼠标时固定表头。
ant design vue table 表格设置了表头固定后单元格被遮挡（笔记）
Huang_John的博客
08-01 1146
antdv table表格被遮挡
vue表格实现固定表头首列
ICode联盟
10-14 414
vue表格实现固定表头首列。
vue表格实现固定表头和首列
浮生的博客
07-08 8428
前言 前段时间做移动端的项目，项目中需要一个固定表头和首列的表格，但由于是移动端的，组件库里没有类似的，于是，就去网上找看有没有类似的，结果越找越气，10个文章9个抄，抄也行，你倒是抄个能用的啊，一篇根本就不能用的文章，你们抄个什么劲？有意义？？？ 没办法，只有自己写一个了。 效果图 实现思路 1、首先分为四部分，左上角固定不动的表头，表头部分，首列部分，表格主体部分 2、整个表格添加定位position: relative；左上角表头添加position: fixed; 3、给白色主体部分添加滚动监听事
Vue 使用Ant-design框架固定表头时导致数据错位
caoxu12457的博客
04-15 3603
需要指定 column 的 width 属性，否则列头和内容可能不对齐。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
antdv table 不能单选
04-13
对于antdv table不能单选的问题，您可以在table组件中设置rowSelection属性，并将type属性设置为radio。例如： ```javascript <Table rowSelection={{ type: 'radio' }} columns={columns} dataSource={data} /> ``...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值