使用LightningDatatable做成的ListView时，有时需要自定义Link项目，例如需要Link式的行删除事件，当点击消除Link时，消除当前行数据，如下
1.消除Link项目表示用子组件
首先js中需要继承【lightning/datatable】，然后自定义data类型(customLink)，在父组件的colmuns处指定，如果有其它类型可以在customTypes 下边直接添加。
opportunityListViewCusDatatable.js
代码语言：javascript复制import LightningDatatable from 'lightning/datatable';
import link from './link.html';
export default class OpportunityListViewCusDatatable extends LightningDatatable {
static customTypes = {
customLink: {
template: link,
typeAttributes: ['linkName'],
},
};
}link.html
代码语言：javascript复制<template>
<c-opportunity-list-view-cus-link-row
row-id={value}
link-name={typeAttributes.linkName}>
</c-opportunity-list-view-cus-link-row>
</template>2.Link项目显示子组件
可以接受value传过来的值，进行具体删除处理。
opportunityListViewCusLinkRow.html
代码语言：javascript复制<template>
<a onclick={handleClick} target="_self">{linkName}</a>
</template>opportunityListViewCusLinkRow.js
代码语言：javascript复制import { LightningElement, api } from 'lwc';
export default class OpportunityListViewCusLinkRow extends LightningElement {
@api rowId
@api linkName;
handleClick(){
console.log('this.rowId>>>>>>>>>>>>' this.rowId);
console.log('this.linkName>>>>>>>>>>>>' this.linkName);
}
}3.ListView父组件
在把Html中的<lightning-datatable></lightning-datatable>替换成上边做成的子组件，如下
代码语言：javascript复制<c-opportunity-list-view-cus-datatable
key-field="id"
data={closedRecords}
show-row-number-column
row-number-offset={rowOffset}
hide-checkbox-column
columns={closedColumns}
>
</c-opportunity-list-view-cus-datatable>js中Columns指定自定义做成的customLink型
代码语言：javascript复制const closedColumns = [
{ label: 'Link', fieldName: 'link', type: 'customLink', typeAttributes: { linkName: { fieldName: 'linkName' }, }, initialWidth: 80 },
];4.详细例
使用<lightning-datatable></lightning-datatable>和自定义方式分别做成两个ListView
opportunityListView.html
代码语言：javascript复制<template>
<div class="slds-card__body">
<lightning-datatable
key-field="id"
data={prospectRecords}
show-row-number-column
row-number-offset={rowOffset}
hide-checkbox-column
columns={prospectColumns}
>
</lightning-datatable>
<c-opportunity-list-view-cus-datatable
key-field="id"
data={closedRecords}
show-row-number-column
row-number-offset={rowOffset}
hide-checkbox-column
columns={closedColumns}
>
</c-opportunity-list-view-cus-datatable>
<template if:false={loaded}>
<lightning-spinner alternative-text="Loading"></lightning-spinner>
</template>
</div>
</template>opportunityListView.js
代码语言：javascript复制import { LightningElement, track, wire } from 'lwc';
import getOpportunityListView from '@salesforce/apex/OpportunityListViewController.getOpportunityListView';
// 案件
const prospectColumns = [
{ label: '案件名', fieldName: 'idLink', type: 'url', sortable: true, typeAttributes: { label: { fieldName: 'name' }, target: '_self' }, initialWidth: 300 },
{ label: '商品名', fieldName: 'productName', type: 'text' },
{ label: 'フェーズ', fieldName: 'stageName', type: 'text', editable: true },
{ label: '案件タイプ', fieldName: 'recordTypeName', type: 'text' },
{ label: '見込み保険料', fieldName: 'amount', type: 'currency' },
{ label: '確度', fieldName: 'probability', type: 'text' },
{ label: '完了予定日', fieldName: 'closeDate', type: 'date' },
{ label: '前回契約の満期日', fieldName: 'maturityDate', type: 'date' },
{ label: '担当者', fieldName: 'ownerName', type: 'text' },
];
const closedColumns = [
{ label: '案件名', fieldName: 'idLink', type: 'url', sortable: true, typeAttributes: { label: { fieldName: 'name' }, target: '_self' }, initialWidth: 300 },
{ label: '商品名', fieldName: 'productName', type: 'text' },
{ label: 'フェーズ', fieldName: 'stageName', type: 'text', editable: true },
{ label: '案件タイプ', fieldName: 'recordTypeName', type: 'text' },
{ label: '見込み保険料', fieldName: 'amount', type: 'currency' },
{ label: '確度', fieldName: 'probability', type: 'text' },
{ label: '完了予定日', fieldName: 'closeDate', type: 'date' },
{ label: '前回契約の満期日', fieldName: 'maturityDate', type: 'date' },
{ label: '担当者', fieldName: 'ownerName', type: 'text' },
{ label: 'Link', fieldName: 'link', type: 'customLink', typeAttributes: { linkName: { fieldName: 'linkName' }, }, initialWidth: 80 },
];
export default class OpportunityListView extends LightningElement {
@track prospectColumns = prospectColumns;
@track closedColumns = closedColumns;
@track records;
@track prospectRecords;
@track closedRecords;
@track wiredRecordList;
@track error;
@track rowOffset = 0;
@track loaded = false;
@wire(getOpportunityListView)
recordList(result) {
this.wiredRecordList = result;
if (result.data) {
this.prospectRecords = result.data?.filter(function (element, index, self) {
return element.stageName== 'Prospecting';
});
this.closedRecords = result.data?.filter(
(r) => r.stageName== 'Closed Won'
)?.map(r => {
return {...r,link: r.id, linkName : '削除'}
}) ?? [];;
console.log('>>>>>>>>this.prospectRecords>>>>>>>' JSON.stringify(this.prospectRecords));
console.log('>>>>>>>>this.closedRecords>>>>>>>' JSON.stringify(this.closedRecords));
this.error = undefined;
this.loaded = true;
} else if (result.error) {
this.error = result.error;
this.records = [];
}
}
}OpportunityListViewController.cls
代码语言：javascript复制public with sharing class OpportunityListViewController {
@AuraEnabled(cacheable=true)
public static List<OpportunityWrapper> getOpportunityListView(){
List<OpportunityWrapper> wappers = new List<OpportunityWrapper>();
// 案件名、商品名、フェーズ、案件タイプ、見込み保険料、確度、完了予定日、前回契約の満期日、担当者
List<Opportunity> resultList = [SELECT Id,
Name, // 案件名
StageName, // フェーズ
Amount, // 見込み保険料
Probability, // 確度
CloseDate, // 完了予定日
RecordTypeId, // レコードタイプ
RecordType.Name // レコードタイプ
FROM Opportunity
ORDER BY LastModifiedDate DESC
LIMIT 5
];
if (resultList!=null && resultList.size() > 0) {
for (Opportunity opp : resultList) {
OpportunityWrapper wapper = new OpportunityWrapper();
wapper.id = opp.Id;
wapper.idLink = '/opportunity/' opp.Id;
// 案件名
wapper.name = opp.Name;
// フェーズ
wapper.stageName = opp.StageName;
// 見込み保険料
wapper.amount = String.valueOf(opp.Amount);
// 確度
wapper.probability = String.valueOf(opp.Probability);
// 完了予定日
wapper.closeDate = opp.CloseDate;
// レコードタイプ
wapper.recordTypeId = opp.RecordTypeId;
wappers.add(wapper);
}
}
return wappers;
}
public class OpportunityWrapper {
@AuraEnabled
public String id;
@AuraEnabled
public String idLink;
// 案件名
@AuraEnabled
public String name;
// フェーズ
@AuraEnabled
public String stageName;
// 見込み保険料
@AuraEnabled
public String amount;
// 確度
@AuraEnabled
public String probability;
// 完了予定日
@AuraEnabled
public Date closeDate;
// レコードタイプ
@AuraEnabled
public String recordTypeId;
}
}
5.子组件中添加删除处理Image
opportunityListViewCusLinkRow.html
代码语言：javascript复制<template>
<a onclick={handleClick} target="_self">{linkName}</a>
<template if:true={showDeleteDilog}>
<div class="slds-modal slds-fade-in-open" style="width: 100%;">
<div class="slds-modal__container" style="width:100%;">
<header class="slds-modal__header inner">
<h2 class="title slds-text-heading--medium slds-hyphenate">Delete Opportunity</h2>
<lightning-button-icon class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
icon-name="utility:close" alternative-text="close" title="close" onclick={handleCancel}>
</lightning-button-icon>
</header>
<div class="slds-modal__content slds-p-around--medium">
<lightning-card style="text-align:center;">
<p class="title slds-text-heading--medium slds-hyphenate">
Are you sure you want to delete this opportunity?
</p>
</lightning-card>
</div>
<div class="slds-modal__footer">
<lightning-button onclick={handleDelete} variant="brand" label="削除" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
<lightning-button onclick={handleCancel} label="キャンセル" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>opportunityListViewCusLinkRow.js
代码语言：javascript复制import { LightningElement, api, track } from 'lwc';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class OpportunityListViewCusLinkRow extends LightningElement {
@api rowId
@api linkName;
@track showDeleteDilog = false;
handleClick(){
this.showDeleteDilog = true;
console.log('this.rowId>>>>>>>>>>>>' this.rowId);
console.log('this.linkName>>>>>>>>>>>>' this.linkName);
}
handleCancel() {
this.showDeleteDilog = false;
}
handleDelete() {
deleteRecord(this.rowId)
.then(() => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Record deleted',
variant: 'success'
})
);
this.showDeleteDilog = false;
window.location.href = '/s/opportunitylistview';
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error deleting record',
message: error.body.message,
variant: 'error'
})
);
});
}
}
