首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >具有冻结列功能的复选框选择会导致primeng表中的多个复选框列

具有冻结列功能的复选框选择会导致primeng表中的多个复选框列
EN

Stack Overflow用户
提问于 2020-08-12 14:51:18
回答 1查看 1.9K关注 0票数 2

我正在实现以下两个功能的Primeng表在我的角度项目。

  1. 复选框选择。向下滚动到名为复选框选择的部分。
  2. 冻结柱。向下滚动到名为Frozen Columns的部分。

Problem:当我冻结列时,复选框列同时出现在“冻结”列和“可滚动”列中。

Required Behavior:应该始终有一个复选框列,不管是否冻结列。

下面是这个问题的Stackblitz最小复制。

https://stackblitz.com/edit/primeng-tableselection-demo-cs4wqw?file=src%2Fapp%2Fapp.component.ts

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-15 07:32:20

我不太清楚为什么会发生这种情况--我们需要查看源代码才能找到答案,但是您可以通过为列添加一个额外的字段来绕过它。

组件

代码语言:javascript
运行
复制
  this.scrollableCols = [
            { field: 'checkBox', header: 'checkBox' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];

模板

代码语言:javascript
运行
复制
<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars1" [scrollable]="true"
    scrollHeight="200px" frozenWidth="300px">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width:300px;">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <!-- <th>
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th> -->
            <th *ngFor="let col of columns" style="height:35px">

                <ng-container *ngIf="col.field === 'checkBox' else baseTemp">
                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                </ng-container>

                <ng-template #baseTemp>
                    {{col.header}}
                </ng-template>


            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>

            <!-- <td>
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
           -->
            <td *ngFor="let col of columns" style="height:35px">

                <ng-container *ngIf="col.field === 'checkBox' else baseTemp">
                    <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                </ng-container>

                <ng-template #baseTemp>
                    {{rowData[col.field]}}
                </ng-template>

            </td>
        </tr>
    </ng-template>
</p-table>

在这里的ng-container *ngIf="col.field === 'checkBox' else baseTemp"中,我们使用字段复选框检查列,然后添加p-tableCheckbox组件

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63379129

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档