带有搜索 LWC 的闪电数据表

开发者可以使用Lightning Web Components（LWC）和闪电数据表组件来构建交互式数据表展示。闪电数据表是一种用于在闪电应用程序中显示数据的聚合组件。闪电数据表组件可以快速响应用户交互，并支持排序、筛选和搜索功能，使数据表的使用和管理更加便捷和友好。

在本文中，我们将讨论如何在闪电数据表中实现带有搜索 LWC 的功能，并提供相关的代码示例和参考资料。

实现步骤

1. 创建一个新的LWC组件并添加闪电数据表组件

在LWC开发中使用闪电数据表，必须要引入“lightning/datatable”模块。创建新的LWC组件并添加闪电数据表组件代码如下：

<template>
    <lightning-card title="带有搜索 LWC 的闪电数据表">
        <div class="slds-m-around_medium">
            <!--搜索框-->
            <lightning-input label="搜索" value={searchKey} onchange={handleKeyChange}>
            </lightning-input>
            
            <!--闪电数据表组件-->
            <lightning-datatable data={data} columns={columns} key-field={keyField}
                                 onrowselection={handleRowSelection}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

上述代码定义了一个基本的LWC组件，在其中添加了闪电数据表和搜索框两个子组件。其中，searchKey 变量用于存储用户输入的搜索关键词，data 用于存储数据表中的数据，columns 定义了数据表的列属性，keyField 定义了数据表选择项的唯一标识符。

2. 在 LWC js 文件中定义相关的变量和方法

为了实现搜索功能，我们需要在 LWC js 文件中定义相关的变量和方法。搜索方法将根据 searchKey 变量中的搜索关键词过滤 data 中的数据，并将过滤结果存储在一个新的变量中。我们把这个新变量称为 filteredData。

import { LightningElement, wire, track } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

const columns = [
    {label: '联系人姓名', fieldName: 'Name', type: 'text'},
    {label: '职位', fieldName: 'Title', type: 'text'},
    {label: '电子邮件', fieldName: 'Email', type: 'email'},
    {label: '电话', fieldName: 'Phone', type: 'phone'}
];

export default class DatatableDemo extends LightningElement {
    @wire(getContacts) data;
    @track searchKey = ''; //搜索关键词
    @track filteredData = []; //过滤后的数据
    columns = columns; //定义数据表的列属性
    keyField = 'Id'; //定义数据表选择项的唯一标识符

    handleRowSelection(event) {
        //处理数据表行选择事件
    }

    handleKeyChange(event) {
        //处理搜索框变化事件
        this.searchKey = event.target.value;
        this.filterData();
    }

    filterData() {
        //根据搜索关键词过滤数据
        if (this.searchKey) {
            const regexp = new RegExp(`^${this.searchKey}`, "i");
            this.filteredData = this.data.data.filter(record => regexp.test(record.Name));
        } else {
            this.filteredData = this.data.data;
        }
    }
}

上述代码在 LightningElement 类中定义了一个新的组件，并使用 @wire 装饰器从服务器端获取联系人数据。columns 是一个数组，用于设置数据表的列属性。handleRowSelection 方法处理数据表行选择事件。handleKeyChange 方法处理搜索框变化事件，并调用 filterData 方法执行数据过滤操作。filterData 方法使用 RegExp 对象构造了一个新的正则表达式对象，并将搜索关键词用于过滤数据。

3. 在 LWC 文件中实现数据绑定和搜索

在 LWC 文件中实现数据绑定和搜索功能，需要将 filteredData 绑定到数据表组件的 data 属性，并在搜索框的 onchange 事件中调用 handleKeyChange 方法。

<template>
    <lightning-card title="带有搜索 LWC 的闪电数据表">
        <div class="slds-m-around_medium">
            <!--搜索框-->
            <lightning-input label="搜索" value={searchKey} onchange={handleKeyChange}>
            </lightning-input>
            
            <!--闪电数据表组件-->
            <lightning-datatable data={filteredData} columns={columns} key-field={keyField}
                                 onrowselection={handleRowSelection}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

上述代码使用了数据绑定将 filteredData 绑定到数据表的 data 属性。onchange 事件监听搜索框的变化，调用 handleKeyChange 方法实现数据过滤和展示。

参考资料

1. LWC官方文档
2. 闪电数据表组件文档
3. RegExr在线正则表达式测试工具