闪电数据表中的自定义货币格式

Question

所以我一直在努力解决这个问题，我有一个闪电数据表，其中有一个用户可以编辑的货币类型列，但是我需要格式化这些列的单元格以在值的末尾添加文本，例如“$20000”每年”。

但是我不知道如何实现这一目标，有人可以帮助我在这里做什么吗？

Answer 1

要实现此功能，您可以在闪电数据表中使用自定义数据类型。自定义数据类型允许您动态设置单元格值的格式，包括添加其他文本（例如“每年”），同时仍然使单元格可编辑。

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

1. 创建自定义类型来处理货币列的格式。

2. 使用自定义类型渲染器将“每年”或任何文本附加到货币值。

3. 使用列上的可编辑属性并实现逻辑来处理编辑，同时保留自定义格式。

代码：

JavaScript 控制器：

import { LightningElement, track } from 'lwc';

export default class CustomDatatable extends LightningElement {
@track data = [
    { id: 1, salary: 20000 },
    { id: 2, salary: 30000 },
    { id: 3, salary: 40000 },
];

columns = [
    {
        label: 'Salary',
        fieldName: 'salary',
        type: 'customCurrency',
        editable: true,
        typeAttributes: {
            currencyCode: 'USD', // Optional, specify if needed
            suffix: 'per year',
        },
    },
];

handleSave(event) {
    const draftValues = event.detail.draftValues;

    // Update the data with the new values
    this.data = this.data.map((row) => {
        const draftValue = draftValues.find((draft) => draft.id === row.id);
        return draftValue ? { ...row, ...draftValue } : row;
    });

    // Clear draft values to remove edit indicators
    this.template.querySelector('lightning-datatable').draftValues = [];
}
}

HTML 模板：

<template>
<lightning-datatable
    key-field="id"
    data={data}
    columns={columns}
    draft-values={draftValues}
    onsave={handleSave}>
</lightning-datatable>
</template>

为了支持自定义数据类型 (customCurrency)，我创建了一个名为“customCurrencyRenderer”的自定义渲染器。

自定义CurrencyRenderer.js：

import { LightningElement, api } from 'lwc';

export default class CustomCurrencyRenderer extends LightningElement {
@api value; // The raw value from the data
@api currencyCode; // e.g., 'USD'
@api suffix; // The text to append, e.g., 'per year'

get formattedValue() {
    const formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: this.currencyCode || 'USD',
    });
    return `${formatter.format(this.value)} ${this.suffix || ''}`;
}
}

customCurrencyRenderer.html：

<template>
<span>{formattedValue}</span>
</template>

customCurrencyRenderer.js-meta.xml：

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="customCurrencyRenderer">
<isExposed>true</isExposed>
<targets>
    <target>lightning__datatable</target>
</targets>
</LightningComponentBundle>

这将确保该列动态显示“每年”，同时允许用户编辑原始值。

如果有帮助请点赞。