PrimeNg 使用模板更改 p 列宽度答案

【问题标题】：PrimeNg change p-column width with templatePrimeNg 使用模板更改 p 列宽度
【发布时间】：2022-01-28 20:11:42
【问题描述】：

尝试设置动态列宽时出现以下错误 ERROR 错误：找不到不同的支持对象 '{width: '180px', 'text-align': 'center'}'

  <p-dataTable [value]="employees">
      <p-header>Employee List</p-header>
      <p-column *ngFor="let userColumn of userColumns" 
        [field]="userColumn.field"          [header]="userColumn.title" 
        [sortable]="userColumn.sort" [style]="userColumn.myStyle">
        </p-column>
  </p-dataTable>

userColumns 定义为

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
      'myStyle' : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      'myStyle': '{width: \'180px\', \'text-align\': \'center\'}'
    }

【问题讨论】：

如果我定义内联样式没有问题
您要为数据添加样式吗？
我想通过外部定义的 userColumns 定义为表中的不同列提供不同的宽度。
我看到这里讨论过这个问题，虽然github.com/primefaces/primeng/issues/584 不明白答案
你找到解决办法了吗

标签： primeng primeng-datatable

【解决方案1】：

尝试更改样式的定义并在“宽度”周围添加单引号像这样：

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
      'myStyle' : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      'myStyle': '{\'width\': \'180px\', \'text-align\': \'center\'}'
    }

【讨论】：

【解决方案2】：

解决方案是将 myStyle 定义为 Object 而不是字符串。否则即使你没有得到不同的错误但不会设置宽度。

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
       myStyle : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      myStyle: {width: '180px', 'text-align': 'center'}
    }

【讨论】：

【解决方案3】：

在 primeng 12 中，他们删除了 colgroup 模板，因此如果您在应用程序上使用 colgroup，则需要删除，因为如果您使用可滚动检查，自定义宽度不适用于列迁移指南。

链接：https://github.com/primefaces/primeng/wiki/Migration-Guide

解决方案：您需要为两个标签 和添加相同的宽度如果您使用的是动态列，则再添加一个属性宽度，如下所示

[{ header: "Name", field: "name", width: '100px' }] // 列对象数组对象

<p-table [value]="data" [columns]="ColumnObjectArray"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns; let idx=index;" class="" [style]="'width':col.width">{{col.header}}</th> </tr> </ng-template> <ng-template pTemplate="body" let-data let-columns="columns"> <tr> <td *ngFor="let col of columns" [style]="'width':col.width"> {{data[col.field]}} </td> </tr> </ng-template> </p-table>

试试这个，你肯定会得到表格的响应宽度，你也会得到自定义的列和标题宽度 希望这对你有用

【讨论】：