Salesforce Lightning Data Table With Row Actions（一）

自定义的ListView中项目需要RowAction的情况下，【lightning-datatable】组件也提供相应方法

一.Row Action添加

1.Html中添加【onrowaction】事件

代码语言：javascript复制

<lightning-datatable
     onrowaction={handleRowAction}>
</lightning-datatable>

2.JS中添加【Row Action】名称

代码语言：javascript复制

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 },
    },
];

代码语言：javascript复制

// 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.效果展示：

二.添加删除处理(前台)

代码语言：javascript复制

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;
}

三.添加删除处理(后台)

代码语言：javascript复制

import { deleteRecord } from 'lightning/uiRecordApi';
deleteRow(row) {
    const { id } = row;
    console.log('>deleteRow>>>id>>>>::' id);
    deleteRecord(id)
    .then(() => {
        refreshApex(this.wiredRecordList);
    })
    .catch(error => {
    })
}

html listview action datatable image

0 人点赞