课程章节介绍
同学们，今天我们来学习如何使用Salesforce的闪电组件——`lightning:datatable`。这个组件非常强大，可以帮助我们在页面上展示和管理数据表格。我们将通过一个具体的例子来学习如何创建一个自定义组件，展示认证学生的列表。
### 1. 创建自定义组件
首先，我们需要创建一个新的自定义组件。假设我们的组件叫做`AwInstructorStudentList`。这个组件将用来展示通过认证的学生列表。
### 2. 使用`lightning:datatable`
在自定义组件中，我们将使用`lightning:datatable`来展示数据。这个组件有几个关键的属性：
- ，data，：这是我们要展示的数据，通常是一个数组。
- ，columns，：这是表格的列定义，告诉表格每一列显示什么数据。
- ，keyField，：这是每一行的唯一标识符，通常是记录的ID。
### 3. 定义列和数据
假设我们有一个学生列表，每个学生有姓名、认证状态和认证日期。我们可以这样定义列和数据：
```html
```
在控制器中，我们可以这样定义`columns`和`studentData`：
```javascript
({
doInit: function(component, event, helper) {
component.set('v.columns', [
{ label: '姓名', fieldName: 'name', type: 'text' },
{ label: '认证状态', fieldName: 'status', type: 'text' },
{ label: '认证日期', fieldName: 'certificationDate', type: 'date' }
]);
component.set('v.studentData', [
{ id: '1', name: '张三', status: '已认证', certificationDate: '2023-10-01' },
{ id: '2', name: '李四', status: '未认证', certificationDate: '2023-10-02' },
{ id: '3', name: '王五', status: '已认证', certificationDate: '2023-10-03' }
]);
}
})
```
### 4. 导航和布局
为了让这个组件在页面上更好地展示，我们可以使用`lightning:navigation`来实现页面之间的跳转，或者使用`lightning:layout`来调整组件的布局。
### 5. 总结
通过这个练习，我们学会了如何使用`lightning:datatable`来展示数据表格，并且创建了一个自定义组件来展示认证学生的列表。这个组件可以很容易地集成到Salesforce的页面中，帮助我们更好地管理和展示数据。
希望这个练习对你们有帮助！如果有任何问题，随时问我哦！