实现一个简单的表格 (Table) 组件，支持排序、分页和过滤

推荐答案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本题详细解读

1. 组件设计思路

• 数据管理：Table 类接收一个数据数组 data 和每页显示的行数 pageSize，并初始化当前页码、排序列、排序方向和过滤文本。
• 排序功能：sort 方法根据指定的列进行排序，支持升序和降序切换。
• 过滤功能：filter 方法根据输入的文本过滤数据，过滤时忽略大小写。
• 分页功能：getPaginatedData 方法根据当前页码和每页显示的行数返回分页后的数据。
• 渲染功能：render 方法生成表格的 HTML 结构，并将排序、分页和过滤功能与表格交互绑定。

2. 关键方法解析

• sort(column)：根据指定的列进行排序，支持升序和降序切换。排序时使用 Array.prototype.sort 方法，根据列的值进行比较。
• filter(text)：根据输入的文本过滤数据，过滤时忽略大小写。过滤后重置当前页码为第一页。
• getFilteredData()：返回过滤后的数据，使用 Array.prototype.filter 方法对数据进行过滤。
• getPaginatedData()：返回当前页的数据，使用 Array.prototype.slice 方法进行分页。
• render()：生成表格的 HTML 结构，并将排序、分页和过滤功能与表格交互绑定。

3. 使用示例

• 创建一个 Table 实例，传入数据数组和每页显示的行数。
• 调用 render 方法生成表格，并将其添加到页面中。

4. 扩展性

• 可以通过扩展 Table 类来支持更多的功能，如自定义列宽、多列排序、动态列等。
• 可以通过 CSS 样式美化表格的外观，使其更符合实际项目需求。