Element-React Table 表格组件

在本章中，我们将详细探讨如何使用 Element-React 的 Table 组件来创建和管理数据表格。我们将从基本的表格结构开始，逐步深入到更复杂的表格功能，如排序、筛选、分页等。

安装和引入

首先，我们需要安装 element-react 包，然后引入所需的组件：

npm install element-react --save

在你的 React 组件文件中，引入 Table 和其他必要的组件：

import React from 'react';
import { Table, TableColumn } from 'element-react';

const App = () => {
  // 组件代码
};

基础表格

让我们从一个简单的表格开始。一个基本的表格需要定义列和行数据。

列定义

每列可以通过 TableColumn 来定义。每列可以有以下属性：prop、label、width 等。

<Table :data="tableData">
  <TableColumn prop="name" label="姓名"></TableColumn>
  <TableColumn prop="age" label="年龄"></TableColumn>
  <TableColumn prop="address" label="地址"></TableColumn>
</Table>

数据源

表格的数据通过 :data 属性传递。这里我们使用一个简单的数组对象：

const tableData = [
  { name: '张三', age: 30, address: '上海市' },
  { name: '李四', age: 25, address: '北京市' },
  { name: '王五', age: 40, address: '广州市' }
];

将数据源与表格结合：

<Table :data="tableData">
  <TableColumn prop="name" label="姓名"></TableColumn>
  <TableColumn prop="age" label="年龄"></TableColumn>
  <TableColumn prop="address" label="地址"></TableColumn>
</Table>

高级特性

排序

你可以启用列的排序功能，让用户可以通过点击表头对列进行升序或降序排列。

<Table :data="tableData" :default-sort="{prop: 'age', order: 'descending'}">
  <TableColumn prop="name" label="姓名" sortable></TableColumn>
  <TableColumn prop="age" label="年龄" sortable></TableColumn>
  <TableColumn prop="address" label="地址"></TableColumn>
</Table>

筛选

通过添加筛选器，用户可以在表格中快速查找特定的信息。

<Table :data="tableData">
  <TableColumn prop="name" label="姓名" filterable></TableColumn>
  <TableColumn prop="age" label="年龄" filterable></TableColumn>
  <TableColumn prop="address" label="地址"></TableColumn>
</Table>

分页

对于大数据集，分页是非常有用的。我们可以使用 pagination 属性来控制分页。

<Table :data="tableData" :page-size="10" :total="tableData.length">
  <TableColumn prop="name" label="姓名"></TableColumn>
  <TableColumn prop="age" label="年龄"></TableColumn>
  <TableColumn prop="address" label="地址"></TableColumn>
</Table>

自定义样式和功能

自定义列模板

有时你需要自定义表格中的单元格内容，可以使用 scopedSlots 或者 slot-scope 来实现。

-- -------------------- ---- -------
------ ------------------
  ------------ ----------- -------------------------
  ------------ ---------- -------------------------
  ------------ -----------
    --------- -------------------
      ------- ----------- -- ----------------------------------
      ------- ----------- -- ------------------------------------
    -----------
  --------------
--------

动态列

根据条件动态生成列也是一个常见的需求。这可以通过循环渲染表格列来实现。

-- -------------------- ---- -------
----- ------- - -
  - ----- ------- ------ ---- --
  - ----- ------ ------ ---- --
  - ----- ---------- ------ ---- -
--

------ ------------------
  ------------------- -- -
    ------------ ------------------ ------------------- ------------------------------------
  ---
--------

总结

通过以上介绍，你应该已经掌握了如何使用 Element-React 的 Table 组件来构建各种类型的表格。从基础表格到带有排序、筛选和分页功能的复杂表格，你可以根据实际需求灵活运用这些功能。

在下一章中，我们将探讨更多关于 Element-React 的高级功能和最佳实践。