angular primeng table 调整列宽,获取最新宽度的数值

发布于 2022-09-12 00:16:12 字数 945 浏览 20 评论 0

概述

我的前端项目使用了 Agnular + PrimeNG,其中的表格组件 table 功能丰富很好用,在使用列宽调整功能时有些疑问。将鼠标放到两个列中间时鼠标样式变换,按下鼠标左键拖动可以调整列宽,我现在想要在拖动之后将所有列的列宽打印出来要怎么做?

我自己的做法

自己测试探索发现这个表格组件有个方法 resizeColGroup ,其有4个参数 table,colIndex,newWidth,nextWidth,依次表示:表格组件、被调整的列的 index、调整后的列宽、后面列的列宽,查看官网没发现有关这个方法的介绍,我使用下面的方法将这些参数打印出来:

    this.ctl_primengTable.resizeColGroup = (table,colIndex,newWidth,nextWidth)=>{
      console.log('colIndex=' + colIndex + ',newWidth=' + newWidth + ',nexWidth='+nextWidth);
    }

每次通过拖动扩展一个列的列宽后,就会打印出来3行:colIndex=0,newWidth=44,nexWidth=85
但是实际列宽没有被调整,只是上面打印出的数字会每次都变化,当在前端代码中将上面的代码去掉后,拖动又有效果了。

我的问题

那么问题来了,一旦使用 resizeColGroup 将参数打印出来,实际UI上列宽就不会调整了,当去掉使用这个方法的代码后拖动列宽就有效了(这是双缝干涉实验的再现?)。能否使用上面提到的方法获取调整后的列宽?或者我的思路错了,应该使用其他方法获取?

有必要的话

QQ = 409223171

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文