如何为LWC lightning-datatable添加切换按钮

Question

我使用LWC将用户表数据加载到datatable。我想为每个记录行添加切换按钮，以激活和停用某些功能。目前，我已经添加了lightning-datatable的复选框选项，用于使用按钮批量更新选定的行。我在LWC的datatable中搜索了切换按钮，但是没有找到一个直接的方法来为lwc中的lightning-datatable添加切换按钮选项。有没有办法这样做？你能帮我一下吗？

​

<template>
    <lightning-card>
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size = "12" >
                <div>
                    <div style="float: right;">
                        <ul class="slds-button-group-row">
                            <li class="slds-button-group-item" >
                                <template if:true={showToggle} style="float: right;">
                                    <lightning-input type="toggle"
                                                     label="Enable Process"
                                                     onchange ={deactivateProcess}
                                                     checked= "{ToggleChecked}"
                                                     class="slds-m-right_xx-small slds-m-left_xx-large" >
                                    </lightning-input>
                                </template>
                            </li>
                            <li class="slds-button-group-item" >
                                <lightning-button  class="slds-m-right_xxx-small slds-m-top_none slds-m-bottom_xxx-small" slot="actions" label="Exclude from De-activation" onclick={updateRecords}>
                                </lightning-button>
                            </li>
                            <li class="slds-button-group-item" >
                                <lightning-helptext  class="slds-m-top_none slds-m-right_small" content="The users that will exclude from the de-activation."></lightning-helptext>
                            </li>
                        </ul>
                    </div>
                    </div>
          </lightning-layout-item>
        </lightning-layout>
        <div>
            <div class="slds-col slds-size_12-of-12 slds-p-top_x-small">
                <div class="lgc-bg">
                    <lightning-datatable
                            key-field="UserId"
                            columns={columns}
                            data={currentPageData}
                            selected-rows= {selectedRows}
                            onrowselection= {rowSelection}
                            sorted-by={sortBy}
                            sorted-direction={sortDirection}
                            onsort={handleSortdata}
                          >
                        </lightning-datatable>
                </div>
                <div class="slds-col sldss-size_10-of-12 slds-p-top_medium">
                    <lightning-layout multiple-rows="true">
                        <lightning-layout-item size = "12" margin= "around-small">
                            <div class="slds-align_absolute-center">
                                <ul class="slds-button-group-row">

                                    <li class="slds-button-group-item" >
                                        <button class="slds-button slds-button_neutral" onclick ={onFirst} disabled={disabledConditionFirst}> First
                                        </button>
                                    </li>
                                    <li class="slds-button-group-item" >
                                        <button class="slds-button slds-button_neutral" disabled={disabledConditionPrev} onclick ={onPrev}> Prev
                                        </button>
                                    </li>
                                    <li class="slds-button-group-item" >
                                        <button class="slds-button slds-button_neutral" disabled={disabledConditionNext} onclick={onNext} >Next</button>
                                    </li>
                                    <li class="slds-button-group-item" >
                                        <button class="slds-button slds-button_neutral"  onclick ={onLast} disabled={disabledConditionLast}> Last
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            </br>
                            <div class="slds-align_absolute-center" >
                        <span
                                disabled={disabledCondition}>Total Records: {totalRecordCount} </span>
                            </div>
                            <div class="slds-align_absolute-center" >
                                <span disabled={disabledCondition}>Page ({page} of {numberOfPages}) </span>
                            </div>
                        </lightning-layout-item>
                    </lightning-layout>
                </div>
            </div>
        </div>
        <div if:true={showLoadingSpinner}>
            <lightning-spinner alternative-text="Loading" size="large"></lightning-spinner>
        </div>
    </lightning-card>
</template>

​

示例UI屏幕截图

​

Answer 1

请尝试遵循并实施Akshay Poddar在他的GitHub repo here上介绍的解决方案。致以亲切的问候！