表格

简介

abp-table是ABP框架中用于表格的基本标签组件。

基本用法：

<abp-table hoverable-rows="true" responsive-sm="true">
        <thead>
            <tr>
                <th scope="Column">#</th>
                <th scope="Column">名字</th>
                <th scope="Column">姓氏</th>
                <th scope="Column">用户名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="Row">1</th>
                <td>马克</td>
                <td>奥托</td>
                <td table-style="Danger">mdo</td>
            </tr>
            <tr table-style="Warning">
                <th scope="Row">2</th>
                <td>雅各布</td>
                <td>桑顿</td>
                <td>fat</td>
            </tr>
            <tr>
                <th scope="Row">3</th>
                <td table-style="Success">拉里</td>
                <td>伯德</td>
                <td>twitter</td>
            </tr>
        </tbody>
    </abp-table>

演示

查看表格演示页面以查看实际效果。

abp-table 属性

• responsive: 用于创建特定断点前的响应式表格。更多信息请参阅断点特定设置。
• responsive-sm: 若未设为false，则设置表格在小屏幕设备上的响应式行为。
• responsive-md: 若未设为false，则设置表格在中等屏幕设备上的响应式行为。
• responsive-lg: 若未设为false，则设置表格在大屏幕设备上的响应式行为。
• responsive-xl: 若未设为false，则设置表格在超大屏幕设备上的响应式行为。
• dark-theme: 若设为true，则将表格颜色主题设为深色。
• striped-rows: 若设为true，则为表格行添加斑马纹效果。
• hoverable-rows: 若设为true，则为表格行添加悬停状态效果。
• border-style: 设置表格的边框样式。应为以下值之一：
  • Default（默认）
  • Bordered（带边框）
  • Borderless（无边框）