在开发中遇到了一些问题:如何格式化lwc Datatable 字段,增加点击事件
lightning-datatable 虽然自带url类型的格式,但是使用后会在字符串添加"https://",无法达到需求,使用下面的设置可以满足要求,并且显示的效果是URL的效果
const columns = [{
label: 'Order Number',
fieldName: 'orderNumber',
type: 'button',
typeAttributes: {
label: { fieldName: 'orderNumber' },
variant: 'base'
},
sortable: "true",
initialWidth: 140
}
];
增加点击事件,需要在html部分增加onrowaction,代码如下:
html:
<lightning-datatable
style='margin-left:20px'
hide-checkbox-column = "true"
key-field="id"
data={data}
onsort={handleSortdata}
sorted-by={sortedBy}
sorted-direction={sortDirection}
onrowaction={handleRowAction}
columns={columns}>
</lightning-datatable>
js:
handleRowAction(event) {
console.log('on click');
const action = event.detail.action;
const row = event.detail.row;
console.log("row orderNumber:" + row.orderNumber)
console.log("action:" + action)
}
点击order number就可以查看到对应的log 以及获取到的值