如何公开 Lightning-primitive 元素以嵌入到 Salesforce Platform 的 LWC HTML 文件中
问题描述 投票：0回答：1
我正在为我的公司定制 LWC
<lightning-datatable/>create-lwc-app即。
import LightningDatatable from 'lightning/datatable';
import datatable from './datatable.html`; // copied lightning-datatable component from installed package of https://www.npmjs.com/package/lightning-base-components
export default class DcxDataTable extends LightningDatatable {
render() {
return datatable;
}
}
问题是我想在 Salesforce Platform 中使用这个自定义的 Lightning-datatable 组件，但是
<lightning-primitive-datatable-*/>首先，我试图找到 npm lighting-base-component 包的存储库所在的位置，因此我可以分叉该存储库，而不是制作该包的副本。 https://www.npmjs.com/package/lightning-base-components
安装 lighting-base-components 包后，可以选择在 lighting-base-component 包的 package.json 中公开这些原始组件，这将使复制的
./datatable.html{
"lwc": {
"expose": [
"lightning/primitiveCellCheckbox",
"lightning/primitiveCellFactory",
"lightning/primitiveDatatableStatusBar",
"lightning/primitiveDatatableIeditPanel",
"lightning/primitiveDatatableLoadingIndicator",
"lightning/primitiveHeaderFactory",
]
}
}
但是，我几乎认为对于平台应用程序来说公开这些组件是不可能的，并且我必须自己创建
<c-primitive-datatable-* /><lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
所以我试图了解如何：
- 显式公开
- 或者理解为什么它在某些组件中工作，这样我就可以配置可以使用这些原始组件的其他组件。
- 或者将其记为运行时侥幸，并将所有
组件转换为本地<lightning-primitive-datatable-*/>
组件<c-primitive-datatable-*/>
如有任何见解或可能的案例，我们将不胜感激。谢谢你。
参考 ./datatable.html 来自 https://www.npmjs.com/package/lightning-base-components
<template>
<span aria-live="polite">
<span class={computedAriaLiveClassForNavMode}
>{ariaLiveNavigationModeText}</span
>
<span class={computedAriaLiveClassForActionMode}
>{ariaLiveActionModeText}</span
>
</span>
<div
lwc:dom="manual"
class="dt-width-observer"
style="width: 100%; height: 0px"
></div>
<div class="dt-outer-container" style="height: 100%; position: relative">
<lightning-primitive-datatable-iedit-panel
data-iedit-panel="true"
visible={state.inlineEdit.isPanelVisible}
row-key-value={state.inlineEdit.rowKeyValue}
col-key-value={state.inlineEdit.colKeyValue}
edited-value={state.inlineEdit.editedValue}
column-def={state.inlineEdit.columnDef}
is-mass-edit-enabled={state.inlineEdit.massEditEnabled}
number-of-selected-rows={state.inlineEdit.massEditSelectedRows}
onieditfinished={handleInlineEditFinish}
onmasscheckboxchange={handleMassCheckboxChange}
></lightning-primitive-datatable-iedit-panel>
<div
class={computedTableContainerClass}
onscroll={handleHorizontalScroll}
style={scrollerXStyles}
>
<div
class="slds-scrollable_y"
onscroll={handleVerticalScroll}
style={computedScrollerStyle}
>
<table
class={computedTableClass}
role={computedTableRole}
style={computedTableStyle}
onkeydown={handleTableKeydown}
onclick={handleCellClick}
onfocusin={handleTableFocusIn}
onfocusout={handleTableFocusOut}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
aria-rowcount={ariaRowCount}
>
<template if:false={hasValidKeyField}>
<!-- empty since keyField wasn't provided -->
</template>
<template if:true={hasValidKeyField}>
<thead class={computedTableHeaderClass}>
<tr
class="slds-line-height_reset"
onprivateresizestart={handleResizeStart}
onprivateresizeend={handleResizeEnd}
>
<template
for:each={state.columns}
for:item="def"
for:index="colIndex"
>
<th
style={def.style}
scope="col"
tabindex={def.tabIndex}
aria-label={def.ariaLabel}
aria-sort={def.sortAriaLabel}
key={def.colKeyValue}
>
<template if:true={def.fixedWidth}>
<lightning-primitive-header-factory
style={def.style}
def={def}
dt-context-id={privateDatatableId}
key={def.colKeyValue}
row-key-value="HEADER"
col-key-value={def.colKeyValue}
has-focus={def.hasFocus}
column-width={def.columnWidth}
col-index={colIndex}
sortable={def.sortable}
sorted={def.sorted}
sorted-direction={def.sortedDirection}
show-checkbox={showSelectAllCheckbox}
actions={def.actions}
>
</lightning-primitive-header-factory>
</template>
<template if:false={def.fixedWidth}>
<lightning-primitive-header-factory
style={def.style}
def={def}
dt-context-id={privateDatatableId}
key={def.colKeyValue}
row-key-value="HEADER"
col-key-value={def.colKeyValue}
col-index={colIndex}
resizable={hasResizebleColumns}
sortable={def.sortable}
sorted={def.sorted}
sorted-direction={def.sortedDirection}
has-focus={def.hasFocus}
column-width={def.columnWidth}
resizestep={state.resizeStep}
actions={def.actions}
>
</lightning-primitive-header-factory>
<div>
<input
placeholder="query here"
/>
</div>
</template>
</th>
</template>
</tr>
</thead>
<tbody style={computedTbodyStyle}>
<template
for:each={renderedRows}
for:item="row"
for:index="rowIndex"
>
<tr
class={row.classnames}
onkeydown={handleTrRowKeyDown}
key={row.key}
data-row-key-value={row.key}
aria-selected={row.ariaSelected}
aria-level={row.level}
aria-expanded={row.isExpanded}
aria-setsize={row.setSize}
aria-posinset={row.posInSet}
tabindex={row.tabIndex}
>
<template
for:each={row.cells}
for:item="cell"
>
<template if:true={cell.isCheckbox}>
<td
class={cell.class}
role="gridcell"
tabindex={cell.tabIndex}
data-label={cell.dataLabel}
key={cell.colKeyValue}
>
<lightning-primitive-cell-checkbox
dt-context-id={privateDatatableId}
has-focus={cell.hasFocus}
data-label={cell.dataLabel}
key={cell.key}
row-key-value={row.key}
col-key-value={cell.colKeyValue}
row-index={rowIndex}
type={row.inputType}
is-selected={row.isSelected}
is-disabled={row.isDisabled}
>
</lightning-primitive-cell-checkbox>
</td>
</template>
<template
if:true={cell.isDataTypeScope}
>
<th
class={cell.class}
style={cell.paddingStyle}
aria-selected={cell.ariaSelected}
aria-readonly={cell.ariaReadOnly}
scope="row"
tabindex={cell.tabIndex}
data-label={cell.dataLabel}
key={cell.colKeyValue}
>
<lightning-primitive-cell-factory
types={privateTypes}
aria-selected={cell.ariaSelected}
data-label={cell.dataLabel}
alignment={cell.alignment}
has-error={cell.hasError}
has-focus={cell.hasFocus}
column-label={cell.dataLabel}
column-type={cell.columnType}
column-sub-type={cell.columnSubType}
wrap-text={cell.wrapText}
wrap-text-max-lines={cell.wrapTextMaxLines}
key={cell.columnType}
row-key-value={row.key}
col-key-value={cell.colKeyValue}
value={cell.value}
icon-name={cell.iconName}
icon-label={cell.iconLabel}
icon-position={cell.iconPosition}
icon-alternative-text={cell.iconAlternativeText}
editable={cell.editable}
display-read-only-icon={cell.displayReadOnlyIcon}
type-attribute-0={cell.typeAttribute0}
type-attribute-1={cell.typeAttribute1}
type-attribute-2={cell.typeAttribute2}
type-attribute-3={cell.typeAttribute3}
type-attribute-4={cell.typeAttribute4}
type-attribute-5={cell.typeAttribute5}
type-attribute-6={cell.typeAttribute6}
type-attribute-7={cell.typeAttribute7}
type-attribute-8={cell.typeAttribute8}
type-attribute-9={cell.typeAttribute9}
type-attribute-10={cell.typeAttribute10}
type-attribute-21={cell.typeAttribute21}
type-attribute-22={cell.typeAttribute22}
>
</lightning-primitive-cell-factory>
</th>
</template>
<template if:true={cell.isDataType}>
<td
class={cell.class}
style={cell.paddingStyle}
aria-selected={cell.ariaSelected}
aria-readonly={cell.ariaReadOnly}
role="gridcell"
tabindex={cell.tabIndex}
data-label={cell.dataLabel}
key={cell.colKeyValue}
>
<lightning-primitive-cell-factory
types={privateTypes}
aria-selected={cell.ariaSelected}
role="gridcell"
data-label={cell.dataLabel}
alignment={cell.alignment}
has-focus={cell.hasFocus}
has-error={cell.hasError}
column-label={cell.dataLabel}
column-type={cell.columnType}
column-sub-type={cell.columnSubType}
wrap-text={cell.wrapText}
wrap-text-max-lines={cell.wrapTextMaxLines}
key={cell.columnType}
row-key-value={row.key}
col-key-value={cell.colKeyValue}
value={cell.value}
icon-name={cell.iconName}
icon-label={cell.iconLabel}
icon-position={cell.iconPosition}
icon-alternative-text={cell.iconAlternativeText}
editable={cell.editable}
display-read-only-icon={cell.displayReadOnlyIcon}
type-attribute-0={cell.typeAttribute0}
type-attribute-1={cell.typeAttribute1}
type-attribute-2={cell.typeAttribute2}
type-attribute-3={cell.typeAttribute3}
type-attribute-4={cell.typeAttribute4}
type-attribute-5={cell.typeAttribute5}
type-attribute-6={cell.typeAttribute6}
type-attribute-7={cell.typeAttribute7}
type-attribute-8={cell.typeAttribute8}
type-attribute-9={cell.typeAttribute9}
type-attribute-10={cell.typeAttribute10}
type-attribute-21={cell.typeAttribute21}
type-attribute-22={cell.typeAttribute22}
>
</lightning-primitive-cell-factory>
</td>
</template>
</template>
</tr>
</template>
<template if:true={isLoading}>
<tr>
<td
colspan={numberOfColumns}
class="slds-is-relative"
>
<lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
</td>
</tr>
</template>
</tbody>
</template>
</table>
</div>
</div>
<template if:true={showStatusBar}>
<lightning-primitive-datatable-status-bar
error={tableError}
onprivatesave={handleInlineEditSave}
onprivatecancel={handleInlineEditCancel}
></lightning-primitive-datatable-status-bar>
</template>
</div>
</template>
1个回答
0
投票
投票
您找到解决方案了吗？我的项目中有一个类似的场景，当面板打开时，我需要在可编辑面板内的闪电输入中选择整个文本，因此用户不必手动选择整个文本来编辑它。
最新问题
- Android 密钥库“未为用户设置 LSKF”
- Settings.py中的这个逻辑是关于数据库冗余的吗
- 如何在 Plotly 中将 Pandas 列设置为日期时间 x 轴
- tidyverse：在 R 中创建自定义分组变量
- 使用 C# 删除 CSV 文件中的字符串值
- Elasticsearch 错误：cluster_block_exception [FORBIDDEN/12/index 只读/允许删除 (api)]，洪水阶段磁盘水位线超出
- 无法在 Pixela API 中创建新用户
- 以“TryParse”方式反序列化 json
- 一键停止打开多个窗口
- 电子邮件回复中的 RSA 技巧
- 地图图标的uni码是什么
- 需要 Lucene 4.1.0 源 jar 或 javadoc jar（以便在 Eclipse 中使用 Lucene 4.1.0 进行开发）
- 如何在Python中将Dict嵌套在Dict数组中？
- 有没有一种方法可以在模块级别调用时将函数注释为类型，但在类内部时显示其属性值？
- 如何高效地遍历Rust中的trait实现图？
- 求解耦合二阶 ODE，Python 中的数值
- 从右到左反转文本并举例
- 为什么即使调用了正确的先决中间件，也无法在全局 Laravel 中间件中访问 `$request->user()` ？
- Pandas 如何将列设置为日期时间列
- 如何对齐 SVG 内部的文本
© www.soinside.com 2019 - 2024. All rights reserved.