Question

我想减少在primeng网格中使用的几列的宽度。但是，据我了解，我们只能更改使用“ p-column”或“ th”标签创建的列的宽度。

下面的PFA代码段：HTML：

 <th *ngFor="let col of columns" [pSortableColumn]="col.field"colspan="col.colspan" style="text-align: 
center;">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>

TS：

this.cols = [
                { field: 'first', header:'FIRST'},
                { field: 'second', header: 'SECOND'},
                { field: 'third', header: 'THIRD'},
                { field: 'fourth', header: 'FOURTH'},
                { field: 'fifth', header: 'FIFTH'},
                { field: 'sixth', header: 'SIXTH'}
            ];

我们如何更改可排序primeng表中动态列的宽度？

Answer 1

将TS文件更新为，传递与动态列的标题名称类似的所需宽度值：

this.cols = [
{field: 'first', header: 'FIRST', width: '20%'},
{field: 'second', header: 'SECOND', width: '30%'},
{field: 'third', header: 'SECOND', width: '50%'}]

使用ngStyle属性绑定width的值：

例如：

<th *ngFor="let col of columns" [pSortableColumn]="col.field" colspan="col.colspan" 
       [ngStyle]="{'width': col.width}">
                {{col.header}}
       <p-sortIcon [field]="col.field"></p-sortIcon>
</th>

Answer 2

您可以通过在<p-table>标签中添加width =“ 100％”来实现。然后，您可以为每个动态列定义宽度百分比。

Answer 3

如果您使用下面的样式，请添加 colgroup 以定义列的样式。

   const list_checkboxes = document.querySelectorAll('.list-check-completed');
    for (let i = 0; i < list_checkboxes.length; i++) {
      const list_checkbox = list_checkboxes[i];
      list_checkbox.onchange = function (e) {
        console.log('event', e);
        const list_newCompleted = e.target.checked;
        const listId = e.target.dataset['id'];
        fetch('/lists/' + listId + '/set-completed', {
          method: 'POST',
          body: JSON.stringify({
            'completed': list_newCompleted,
          }),
          headers: {
            'Content-Type': 'application/json',
          }
        })
          .then(response => response.json())
          .then(jsonResponse => {
          console.log('response', jsonResponse);
          window.location.reload(true);
          document.getElementById('error').className = 'hidden';
        })
          .catch(function () {
            document.getElementById('error').className = '';
          })
      }
    }

Answer 4

provide style like this 

[ngStyle]="{'width': '100%'}"

for eg
 <th *ngFor="let col of columns" [ngSwitch]="col.name">
        <div *ngIf="col.filterable">
          <div *ngIf="col.datatype == 'string'  || col.datatype == 'float'">
            <input pInputText *ngSwitchCase="col.name" type="text" [ngStyle]="{'width': '100%'}" (keyup.enter)="onFilter($event.target.value, col.dataIndex)" />
          </div>
        </div>
      </th>

可以在可排序的填充表中更改列的宽度吗？

4 个答案: