p-table拖拽改变列宽和重新排序

Jacky-Liu999

于 2019-05-11 12:57:55 发布

阅读量1.2k

点赞数

分类专栏： Angular 文章标签： angular p-table

本文链接：https://blog.csdn.net/hotboyboy/article/details/90108333

版权

Angular 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在Angular应用中利用p-table组件实现列宽的动态调整和列的重新排序功能。首先，确保安装了primeNG库。接着，通过HTML和TS代码示例展示了如何结合p-table的功能来实现这一交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果需要使用p-tabel,请先intsll primeNg
https://mp.csdn.net/mdeditor/90108307#
Html:
动态获取数据

                        <p-table [columns]="cols" [value]="users" [reorderableColumns]="true" [resizableColumns]="true">
                                <ng-template pTemplate="header" let-columns>
                                    <tr>
                                        <th *ngFor="let col of columns" pReorderableColumn pResizableColumn>
                                            {{col.header}}
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-user let-columns="columns">
                                    <tr>
                                        <td *ngFor="let col of columns">
                                            {{user[col.field]}}
                                        </td>
                                    </tr>
                                </ng-template>
                              </p-table>

ts.

  users: User[];

  cols: any[];
  ngOnInit() {
    this.users = [
      { id: '1', name: 'kiran',email:'kiran@gmail.com' },
      { id: '2', name: 'tom',email:'tom@gmail.com' },
      { id: '3', name: 'john',email:'john@gmail.com' },
      { id: '4', name: 'Frank',email:'frank@gmail.com' },

  ];
    this.cols = [
        { field: 'id', header: 'Id' },
        { field: 'name', header: 'Name' },
        { field: 'email', header: 'Email' },
    ];
}


export interface User {
  id;
  name;
  email;
}

在这里插入图片描述