如何为Lightning-datatable添加删除按钮并实现行删除功能

1. 配置操作列 #

在你的表格列定义中，新增一个type="action"的列，配置删除按钮的显示信息：

const columns = [
    // 你的其他列配置...
    {
        type: 'action',
        typeAttributes: {
            rowActions: [
                { label: '删除', name: 'delete', iconName: 'utility:delete' }
            ]
        }
    }
];

2. 绑定行操作事件 #

给lightning-datatable组件绑定onrowaction事件，用于监听按钮点击：

<lightning-datatable
    data={tableData}
    columns={columns}
    key-field="id" <!-- 必须指定行的唯一标识字段 -->
    onrowaction={handleRowAction}
></lightning-datatable>

3. 处理删除逻辑 #

在JS控制器中实现handleRowAction方法，识别删除操作并执行行删除：

handleRowAction(event) {
    const actionName = event.detail.action.name;
    const targetRow = event.detail.row;
    if (actionName === 'delete') {
        this.removeRow(targetRow.id); // 传入行的唯一标识
    }
}

removeRow(rowId) {
    // 前端过滤掉要删除的行，更新表格数据
    this.tableData = this.tableData.filter(item => item.id !== rowId);
    
    // 可选：如果需要同步到Salesforce后端，调用Apex方法
    // deleteRecord(rowId)
    //     .then(() => { /* 处理成功逻辑 */ })
    //     .catch(error => { /* 处理错误逻辑 */ });
}

完整示例代码 #

HTML模板 #

<template>
    <lightning-datatable
        data={tableData}
        columns={columns}
        key-field="id"
        onrowaction={handleRowAction}
        hide-checkbox-column
    ></lightning-datatable>
</template>

JS控制器 #

import { LightningElement } from 'lwc';

export default class DatatableDeleteDemo extends LightningElement {
    // 模拟表格数据
    tableData = [
        { id: '1', name: '张三', department: '技术部' },
        { id: '2', name: '李四', department: '市场部' },
        { id: '3', name: '王五', department: '人事部' }
    ];

    columns = [
        { label: '姓名', fieldName: 'name' },
        { label: '部门', fieldName: 'department' },
        {
            type: 'action',
            typeAttributes: {
                rowActions: [
                    { label: '删除', name: 'delete', iconName: 'utility:delete' }
                ]
            }
        }
    ];

    handleRowAction(event) {
        const action = event.detail.action;
        const row = event.detail.row;
        if (action.name === 'delete') {
            this.removeRow(row.id);
        }
    }

    removeRow(rowId) {
        this.tableData = this.tableData.filter(item => item.id !== rowId);
        // 如需后端同步，在此调用Apex删除记录
    }
}

内容的提问来源于stack exchange，提问作者Jhony