6

我正在尝试使用 PrimeNG 将标题列分组与冻结列一起使用。我能够冻结前两列,但未冻结的列在标题中也有冻结的列名。

我从这里引用了代码:-

http://www.primefaces.org/primeng/#/datatable/colgroup http://www.primefaces.org/primeng/#/datatable/scroll

PrimeNG 版本 :- "primeng": "^2.0.0",

在此处输入图像描述 我的组件 html 页面包含:

<p-dataTable [value]="sales"  scrollable="true" scrollHeight="200px"  frozenWidth="450px" unfrozenWidth="600px" >
   <p-headerColumnGroup>
      <p-row>
         <p-column header="Brand" [style]="{'width':'250px'}"  ></p-column>
         <p-column header="Last Year Sale" [style]="{'width':'250px'}"></p-column>
         <p-column header="This Year Sale" [style]="{'width':'250px'}"></p-column>
         <p-column header="Last Year Profit" [style]="{'width':'250px'}"></p-column>
         <p-column header="This Year Profit" [style]="{'width':'250px'}"></p-column>
      </p-row>
      <p-row>
         <p-column header="Sale Rate" colspan="5"></p-column>
      </p-row>
   </p-headerColumnGroup>
   <p-column field="brand" [style]="{'width':'250px'}" frozen="true"></p-column>
   <p-column field="lastYearSale" [style]="{'width':'250px'}" frozen="true" ></p-column>
   <p-column field="thisYearSale" [style]="{'width':'250px'}"></p-column>
   <p-column field="lastYearProfit" [style]="{'width':'250px'}"></p-column>
   <p-column field="thisYearProfit" [style]="{'width':'250px'}"></p-column>
</p-dataTable>

我的组件文件有:

ngOnInit() {
    this.sales = [{
            brand: 'Philips',
            lastYearSale: '49%',
            thisYearSale: '22%',
            lastYearProfit: '$745,232',
            thisYearProfit: '$650,323,'
        },
        {
            brand: 'Song',
            lastYearSale: '17%',
            thisYearSale: '79%',
            lastYearProfit: '$643,242',
            thisYearProfit: '500,332'
        },
        {
            brand: 'LG',
            lastYearSale: '52%',
            thisYearSale: ' 65%',
            lastYearProfit: '$421,132',
            thisYearProfit: '$150,005'
        },
        {
            brand: 'Sharp',
            lastYearSale: '82%',
            thisYearSale: '12%',
            lastYearProfit: '$131,211',
            thisYearProfit: '$100,214'
        },
        {
            brand: 'Panasonic',
            lastYearSale: '44%',
            thisYearSale: '45%',
            lastYearProfit: '$66,442',
            thisYearProfit: '$53,322'
        },
        {
            brand: 'HTC',
            lastYearSale: '90%',
            thisYearSale: '56%',
            lastYearProfit: '$765,442',
            thisYearProfit: '$296,232'
        },
        {
            brand: 'Toshiba',
            lastYearSale: '75%',
            thisYearSale: '54%',
            lastYearProfit: '$21,212',
            thisYearProfit: '$12,533'
        }
    ];
}
4

0 回答 0