首页 / 组件 / 表格组件

表格组件（增强版）

功能强大的表格组件，支持排序、筛选、分页等功能，适用于展示和管理结构化数据。

数据展示 高级组件

基础用法

最基本的表格展示，展示结构化的数据内容。

注意：当前展示的是静态组件示例。如需自定义样式，请使用AI编辑器进行修改。
姓名 年龄 职位 状态
张三 28 前端工程师 在职
李四 32 UI设计师 试用期
王五 35 产品经理 离职
HTML 
<div class="table-wrapper">
    <table class="table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职位</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>前端工程师</td>
                <td><span class="status-tag status-success">在职</span></td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>UI设计师</td>
                <td><span class="status-tag status-warning">试用期</span></td>
            </tr>
            <tr>
                <td>王五</td>
                <td>35</td>
                <td>产品经理</td>
                <td><span class="status-tag status-error">离职</span></td>
            </tr>
        </tbody>
    </table>
</div>

带排序的表格

点击表头可以对数据进行排序。

ID 姓名 年龄 职位 状态
1001 张三 28 前端工程师 在职
1002 李四 32 UI设计师 试用期
1003 王五 35 产品经理 离职
HTML 
<div class="table-wrapper">
    <table class="table">
        <thead>
            <tr>
                <th data-sort="id">
                    ID
                    <i class="mdi mdi-arrow-up-down sort-icon"></i>
                </th>
                <th data-sort="name">
                    姓名
                    <i class="mdi mdi-arrow-up-down sort-icon"></i>
                </th>
                <th data-sort="age">
                    年龄
                    <i class="mdi mdi-arrow-up-down sort-icon"></i>
                </th>
                <th>职位</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>28</td>
                <td>前端工程师</td>
                <td><span class="status-tag status-success">在职</span></td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李四</td>
                <td>32</td>
                <td>UI设计师</td>
                <td><span class="status-tag status-warning">试用期</span></td>
            </tr>
            <tr>
                <td>1003</td>
                <td>王五</td>
                <td>35</td>
                <td>产品经理</td>
                <td><span class="status-tag status-error">离职</span></td>
            </tr>
        </tbody>
    </table>
</div>

带搜索和分页的表格

支持数据搜索和分页功能。

ID 姓名 年龄 职位 状态 操作
1001 张三 28 前端工程师 在职 编辑 删除
1002 李四 32 UI设计师 试用期 编辑 删除
1003 王五 35 产品经理 离职 编辑 删除
HTML 
<div class="table-wrapper">
    <div class="table-search">
        <input type="text" class="search-input" placeholder="搜索...">
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>职位</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>28</td>
                <td>前端工程师</td>
                <td><span class="status-tag status-success">在职</span></td>
                <td>
                    <a href="#" class="table-action">编辑</a>
                    <a href="#" class="table-action">删除</a>
                </td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李四</td>
                <td>32</td>
                <td>UI设计师</td>
                <td><span class="status-tag status-warning">试用期</span></td>
                <td>
                    <a href="#" class="table-action">编辑</a>
                    <a href="#" class="table-action">删除</a>
                </td>
            </tr>
            <tr>
                <td>1003</td>
                <td>王五</td>
                <td>35</td>
                <td>产品经理</td>
                <td><span class="status-tag status-error">离职</span></td>
                <td>
                    <a href="#" class="table-action">编辑</a>
                    <a href="#" class="table-action">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="pagination">
        <button class="pagination-btn"><i class="mdi mdi-chevron-left"></i></button>
        <button class="pagination-btn active">1</button>
        <button class="pagination-btn">2</button>
        <button class="pagination-btn">3</button>
        <button class="pagination-btn"><i class="mdi mdi-chevron-right"></i></button>
    </div>
</div>

API

表格组件的属性说明。

属性 说明 类型 默认值
data 表格数据源 array []
columns 表格列配置 array []
sortable 是否可排序 boolean false
pagination 是否显示分页 boolean false
pageSize 每页显示条数 number 10
searchable 是否可搜索 boolean false