自定义的ListView中项目需要RowAction的情况下,【lightning-datatable】组件也提供相应方法
1.Html中添加【onrowaction】事件
<lightning-datatable
onrowaction={handleRowAction}>
</lightning-datatable>
2.JS中添加【Row Action】名称
const actions = [
{ label: 'Show details', name: 'show_details' },
{ label: 'Delete', name: 'delete' },
];
const columns = [
{ label: 'Name', fieldName: 'idLink', type: 'url', sortable: true,
typeAttributes: { label: { fieldName: 'name' }, target: '_self' }, initialWidth: 300 },
{ label: 'Email', fieldName: 'email', type: 'text', sortable: true },
{ label: 'Phone', fieldName: 'phone', type: 'text', sortable: true, editable: true },
{ label: 'OwnerName', fieldName: 'ownerName', type: 'text', sortable: true },
{ label: 'Birthdate', fieldName: 'birthdate', type: 'date', sortable: true },
{
type: 'action',
typeAttributes: { rowActions: actions },
},
];
// Row Action
handleRowAction(event) {
const actionName = event.detail.action.name;
const row = event.detail.row;
switch (actionName) {
case 'delete':
this.deleteRow(row);
break;
case 'show_details':
this.showRowDetails(row);
break;
default:
}
}
deleteRow(row) {
const { id } = row;
console.log('>deleteRow>>>id>>>>::'+id);
}
showRowDetails(row) {
const { id } = row;
console.log('>>showRowDetails>>id>>>>::'+id);
}
3.效果展示:
deleteRow(row) {
const { id } = row;
console.log('>deleteRow>>>id>>>>::'+id);
const index = this.findRowIndexById(id);
if (index !== -1) {
this.records = this.records
.slice(0, index)
.concat(this.records.slice(index + 1));
}
}
findRowIndexById(id) {
let ret = -1;
this.records.some((row, index) => {
if (row.id === id) {
ret = index;
return true;
}
return false;
});
return ret;
}
import { deleteRecord } from 'lightning/uiRecordApi';
deleteRow(row) {
const { id } = row;
console.log('>deleteRow>>>id>>>>::'+id);
deleteRecord(id)
.then(() => {
refreshApex(this.wiredRecordList);
})
.catch(error => {
})
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。