javascript - 从 html lwc 组件值中获取所有内容到它的 JS 组件中

Question

我使用 Aura 组件在 Sobject 上弹出一个自定义按钮，该组件又调用 LWC 组件。在 .html 中有一个包含文本段落的表单和一个可以添加/删除行的动态自定义表格。我需要把那些文本段落和表格数据邮寄给我们的客户。

<template>
<form>
    <lightning-card title="Test">
        <template if:true={fieldsData}>
            <div class="slds-rich-text-editor__output slds-grid">
                <div aria-label="Compose text" contenteditable="true" class="slds-rich-text-area__content slds-grow" style="min-height:500px">
                    <p>Hallo {firstName},</p><br>

                    <p>some text...</p><br>

                    <div class="slds-grid slds-wrap slds-gutters">
                        <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-2">
                            <lightning-button-icon icon-name="utility:add" slot="actions" onclick={addRow}></lightning-button-icon>
                            <lightning-button
                                    label="Clear All"
                                    icon-name="utility:clear"
                                    slot="actions"
                                    onclick={tempRecords}>
                            </lightning-button>
                            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                                <thead>
                                <tr class="">
                                    <th class="slds-size_3-of-10" scope="col">
                                        <div class="slds-truncate" title="Name">S.No</div>
                                    </th>
                                    <th class="slds-size_3-of-10" scope="col">
                                        <div class="slds-truncate" title="Desc">Description</div>
                                    </th>
                                    <th class="slds-size_3-of-10" scope="col">
                                        <div class="slds-truncate" title="Cost">Price</div>
                                    </th>
                                    <th class="slds-size_3-of-10" scope="col">
                                        <div class="slds-truncate" title="Action">Action</div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <template for:each={records} for:item="info" for:index="indexVar">
                                    <tr key={info.key} class="slds-hint-parent">
                                        <td class="slds-size_3-of-10">
                                            <div >
                                                <div class="slds-text-heading_small slds-text-align_center" key={info.key} data-id={info.key}>
                                                    <c-serial-number-comp index={indexVar}></c-serial-number-comp>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="slds-size_3-of-10">
                                            <div >
                                                <lightning-input key={info.key} data-id={info.key} name="input1" label="Desc" type="text" value={info.desc} variant="label-hidden"
                                                                 onblur={handleDescChange}></lightning-input>
                                            </div>
                                        </td>
                                        <td class="slds-size_3-of-10" >
                                            <div >
                                                <lightning-input key={info.key} data-id={info.key} name="input1" label="Cost" type="number" formatter="currency" step="0.01"
                                                                 value={info.cost} variant="label-hidden" onblur={handleCostChange}></lightning-input>
                                            </div>
                                        </td>
                                        <td class="slds-size_1-of-10" >
                                            <a name={indexVar} data-id={info.key} onclick={removeRow}>
                                                <lightning-icon icon-name="action:delete" alternative-text="delete" size="small"></lightning-icon>
                                            </a>
                                        </td>
                                    </tr>
                                </template>
                                <tr>
                                    <td class="slds-size_3-of-10" scope="col">
                                        <div class="slds-truncate" title="Name"></div>
                                    </td>
                                    <td class="slds-size_3-of-10" scope="col">
                                        <lightning-input class="slds-truncate" disabled type="text" value="Gesamt"></lightning-input>
                                    </td>
                                    <td class="slds-size_3-of-10" scope="col">
                                        <lightning-input class="slds-truncate" disabled type="number" formatter="currency" step="0.01" value={total}></lightning-input>
                                    </td>
                                    <td class="slds-size_3-of-10" scope="col">
                                        <div class="slds-truncate" title="Name"></div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <br>
                <p>some more text here...</p>
                    </template>
    </lightning-card>
</form>
<footer class="slds-modal__footer" style="background-color: white;">
    <lightning-button label="Send" variant="brand" type="submit" name="save" onclick={handleSave}></lightning-button>&nbsp;&nbsp;
</footer>
</template>

我通过template.querylocatorAll('lightning-card').innerHTML;在 JS 组件中使用实现了这一点，到目前为止它看起来很棒。但面临 1 个问题，即<tbody>结果 html 中没有动态表值。

如果有人对此实施有任何更好的想法，请提出建议。