如何在onrowaction上更改闪电数据表中的按钮背景颜色？

Question

我在数据表的每一行都有一个按钮，所以我想在单击后更改颜色。

下面是我的代码片段。

{
    label: 'Include GST',
    type: 'button',
    fieldName: 'invoiceNumber',
    typeAttributes: {
        title:'Include GST',
        alternativeText:'Include GST',
        name:'Include_GST',
        label: 'Include GST',
        value : 'invoiceNumber',
        variant : {fieldName: 'buttonColor'}
    },
    cellAttributes: {
        width:'3rem'
    }
}

并在 RowAction 上尝试使用变量更改按钮的变体。这是行不通的。知道我怎样才能实现这一目标。

Answer 1

要动态更改 Lightning 数据表行中按钮的颜色，您需要更新与该行关联的数据并将其重新分配给 Lightning 数据表的数据属性。这涉及更新单击行的buttonColor字段。

以下是实现此目标的方法：

1. 确保数据数组中的每一行都有一个buttonColor字段。该字段将控制按钮的变体。

2. 更新 onRowAction 处理程序中单击行的 buttonColor 值。

3. 修改数据数组后，重新分配它以触发反应。

代码：

JavaScript 控制器：

import { LightningElement, track } from 'lwc';

export default class DataTableWithButton extends LightningElement {
@track data = [
    { id: 1, invoiceNumber: 'INV001', buttonColor: 'neutral' },
    { id: 2, invoiceNumber: 'INV002', buttonColor: 'neutral' },
    { id: 3, invoiceNumber: 'INV003', buttonColor: 'neutral' },
];

columns = [
    {
        label: 'Include GST',
        type: 'button',
        fieldName: 'invoiceNumber',
        typeAttributes: {
            title: 'Include GST',
            alternativeText: 'Include GST',
            name: 'Include_GST',
            label: 'Include GST',
            variant: { fieldName: 'buttonColor' },
        },
        cellAttributes: {
            width: '3rem',
        },
    },
];

handleRowAction(event) {
    const actionName = event.detail.action.name;
    const row = event.detail.row;

    if (actionName === 'Include_GST') {
        // Update the button color
        this.data = this.data.map((dataRow) => {
            if (dataRow.id === row.id) {
                return { ...dataRow, buttonColor: 'success' }; // Change to "success" or any variant
            }
            return dataRow;
        });
    }
}
}

HTML 模板：

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

在上面的代码中，

1. typeAttributes.variant 动态绑定到每行的buttonColor 字段。

2. @track 装饰器确保对数据数组的更改是反应性的并反映在 UI 中。

3. 单击按钮时，onrowaction 事件处理程序会识别单击的行并更新其 ButtonColor 字段。

4. Salesforce LWC 中的常见按钮变体包括中性、品牌、破坏性和成功。使用它们来改变颜色。

如果有帮助，请标记为最佳答案。

以下是截图供您参考。

1. 点击按钮之前
2. 单击第一个按钮后。
3. 单击第二个按钮后。