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

概述

我的前端项目使用了 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

阅读 2.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进