salesforce - 如何在 Lightning Web 组件数据表 URL 列中添加 onclick 功能

Question

我在 LWC 中创建了一个闪电数据表，并添加了一个显示 URL 的自定义列。现在，我想添加 onclick URL 字段中的事件并希望将行信息传递给 javascript 方法。

这个想法是呈现组件标记，该标记将显示有关单击的项目的所有信息(在同一 LWC 内)。

任何人都可以帮我解决这个问题吗？如何在 URL 中添加 onclick 事件并使用 LWC 数据表中的函数处理单击事件？

test.html

<div class="" style="height:420px">
    <lightning-datatable key-field="Id" 
        data={lstAllRows} 
        columns={columns}
        onrowaction={handleRowAction} 
        enable-infinite-loading
        load-more-offset={intLoadOffset}
        onloadmore={handleLoadMoreData}
        hide-checkbox-column>
    </lightning-datatable>
</div>

test.js

getRequiredList(){
    getTabelData({
        strName: this.strName
        }).then(response =>{
            this.lstTmp = response.lstExistingData;
            this.lstTmp.forEach(function(record){
                record.linkName = '/lightning/r/'+record.Id+'/view'; 
            });
            this.lstAllRows = this.lstTmp;
        }).catch(error =>{
                this.strRecordErrorMessage = error.body.message;
                console.log('Error in getting the accounts', this.strRecordErrorMessage);
            })
}       

this.columns = [
{ label: this.label.columnName, fieldName: 'linkName', type: 'url', 
    typeAttributes: {label: { fieldName: 'Name' }, target: '' },
    cellAttributes: { } 
}]

我在哪里添加网址:

record.linkName = '/lightning/r/'+record.Id+'/view';

我想添加一个 onclick事件并停止 URL 重定向行为。对 URL 的任何点击都不应将用户重定向到新页面；取而代之的是，一段标记应该在同一个 LWC 上呈现记录详细信息。

Answer 1

您可能可以通过两种方式实现您的需求:

创建静态行级操作

创建自定义数据类型

有关更多信息，您可以去那里: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation
P.S:这里有一些基本的 javascript 改进

async getRequiredList () {
    try {
        const response = await getTabelData({
            strName: this.strName
        });

        this.lstAllRows = response.lstExistingData.map(record => ({
            ...record,
            linkName: `/lightning/r/${record.Id}/view`,
        }));
    } catch (error) {
        this.strRecordErrorMessage = error.body.message;
        console.log('Error in getting the accounts', this.strRecordErrorMessage);
    })
}