Primeng是一个基于Angular框架的UI组件库,提供了丰富的可重用组件。Context Menu是Primeng中的一个组件,用于创建上下文菜单。
在Primeng中使用Context Menu和TurboTable结合起来,可以实现在关闭上下文菜单时删除行选择的功能。具体步骤如下:
<p-table [value]="data" [contextMenu]="cm">
<ng-template pTemplate="header">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td>{{rowData.column1}}</td>
<td>{{rowData.column2}}</td>
<td>{{rowData.column3}}</td>
</tr>
</ng-template>
</p-table>
<p-contextMenu #cm [model]="contextMenuItems"></p-contextMenu>
import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
data: any[];
contextMenuItems: MenuItem[];
ngOnInit() {
this.data = [
{ column1: 'Value 1', column2: 'Value 2', column3: 'Value 3' },
{ column1: 'Value 4', column2: 'Value 5', column3: 'Value 6' },
{ column1: 'Value 7', column2: 'Value 8', column3: 'Value 9' }
];
this.contextMenuItems = [
{
label: 'Delete',
icon: 'pi pi-trash',
command: (event) => this.deleteRow(event)
}
];
}
deleteRow(event) {
const selectedRow = event.target.parentElement.parentElement;
const rowIndex = selectedRow.rowIndex - 1;
this.data.splice(rowIndex, 1);
}
}
在上述代码中,我们定义了一个名为contextMenuItems
的数组,其中包含一个标签为"Delete"的菜单项。当用户点击"Delete"菜单项时,会触发deleteRow
函数,该函数会获取选中行的索引,并从数据数组中删除该行。
这样,当用户在表格中右键点击时,会弹出上下文菜单,选择"Delete"菜单项后,会删除对应的行数据。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。
注意:以上推荐的腾讯云产品仅作为示例,实际选择产品时应根据具体需求进行评估和选择。
领取专属 10元无门槛券
手把手带您无忧上云