要在Angular 6中实现多选行的功能,你可以使用angular-6-datatable插件。以下是一个示例代码,演示如何在angular-6-datatable中实现多选行的功能:
npm install angular-6-datatable --save
import { DataTableModule } from 'angular-6-datatable';
@NgModule({
imports: [
DataTableModule
]
})
export class YourModule { }
selectedRows: any[] = [];
onSelect({ selected }) {
this.selectedRows.splice(0, this.selectedRows.length);
this.selectedRows.push(...selected);
}
onActivate(event) {
// 激活行时更新选中的行数组
if (event.type === 'click') {
this.selectRow(!event.row.selected, event.row);
}
}
selectRow(selected, row) {
if (selected) {
this.selectedRows.push(row);
} else {
const index = this.selectedRows.indexOf(row);
this.selectedRows.splice(index, 1);
}
}
selectAll(checked) {
if (checked) {
this.selectedRows = [...this.yourData];
} else {
this.selectedRows = [];
}
}
isSelected(row) {
return this.selectedRows.indexOf(row) !== -1;
}
这样,你就可以在angular-6-datatable中实现多选行的功能了。当选中或取消选中行时,相关事件处理函数会更新选中的行数组。