ng-ytl-zorro-antd/src/showcase/nz-demo-table/nz-demo-table.html

An enterprise-class UI components based on Ant Design and Angular

<article>

  <section class="markdown">
    <h1>Table 表格</h1>
    <section class="markdown"><p>展示行列数据。</p>
      <h2 id="何时使用"><span>何时使用</span>
      </h2>
      <ul>
        <li><p>当有大量结构化的数据需要展现时；</p></li>
        <li><p>当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。</p></li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>

  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="24">
      <nz-code-box [nzTitle]="'简单'" id="components-table-demo-basic" [nzCode]="NzDemoTableBasicCode">
        <nz-demo-table-basic demo></nz-demo-table-basic>
        <div intro>
          <p>简单的表格，最后一列是各种操作。 </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'可选择'" id="components-table-demo-selection" [nzCode]="NzDemoTableSelectionCode">
        <nz-demo-table-selection demo></nz-demo-table-selection>
        <div intro>
          <p>第一列是联动的选择框。 </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'选择和操作'" id="components-table-demo-selection-and-operation" [nzCode]="NzDemoTableSelectionAndOperationCode">
        <nz-demo-table-selection-and-operation demo></nz-demo-table-selection-and-operation>
        <div intro>
          <p>选择后进行操作，完成后清空选择。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'选择框属性'" id="components-table-demo-selection-props" [nzCode]="NzDemoTableSelectionPropsCode">
        <nz-demo-table-selection-props demo></nz-demo-table-selection-props>
        <div intro>
          <p>配置选择框的默认属性。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'可控的筛选和排序'" id="components-table-demo-reset-filter" [nzCode]="NzDemoTableResetFilterCode">
        <nz-demo-table-reset-filter demo></nz-demo-table-reset-filter>
        <div intro>
          <p>使用受控属性对筛选和排序状态进行控制。</p>
          <p>nzTable可以像
            <a href="http://www.w3school.com.cn/tags/tag_table.asp" target="_blank">HTML table 标签</a>
            一样自定义表头和内容，通过配合 <code>nz-table-sort</code>与 <code>nz-table-filter</code>可以方便的自定义筛选和排序功能。
          </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义筛选菜单'" id="components-table-demo-custom-filter" [nzCode]="NzDemoTableCustomFilterCode">
        <nz-demo-table-custom-filter demo></nz-demo-table-custom-filter>
        <div intro>
          <p>通过 <code>nz-dropdown</code>的 <code>nz-dropdown-custom</code>属性自定义筛选菜单</p>
          <p>nzTable可以像
            <a href="http://www.w3school.com.cn/tags/tag_table.asp" target="_blank">HTML table 标签</a>
            一样自定义表头和内容。
          </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'分页'" id="components-table-demo-paging" [nzCode]="NzDemoTablePagingCode">
        <nz-demo-table-paging demo></nz-demo-table-paging>
        <div intro>
          <p>数据项较多时显示分页。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'远程加载数据'" id="components-table-demo-ajax" [nzCode]="NzDemoTableAjaxCode">
        <nz-demo-table-ajax demo></nz-demo-table-ajax>
        <div intro>
          <p>这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。</p>
          <p><strong>注意，此示例使用
            <a href="https://randomuser.me">模拟接口</a>
            ，展示数据可能不准确，请打开网络面板查看请求。</strong></p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'可展开'" id="components-table-demo-expand" [nzCode]="NzDemoTableExpandCode">
        <nz-demo-table-expand demo></nz-demo-table-expand>
        <div intro>
          <p>当表格内容较多不能一次性完全展示时。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'表格行/列合并'" id="components-table-demo-colspan-rowspan" [nzCode]="NzDemoTableColspanRowspanCode">
        <nz-demo-table-colspan-rowspan demo></nz-demo-table-colspan-rowspan>
        <div intro>
          <p>nzTable可以像
            <a href="http://www.w3school.com.cn/tags/tag_table.asp" target="_blank">HTML table 标签</a>
            一样使用 <code>rowspan</code>和 <code>colspan</code>标签
          </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'树形数据展示'" id="components-table-demo-expand-tree" [nzCode]="NzDemoTableExpandTreeCode">
        <nz-demo-table-expand-tree demo></nz-demo-table-expand-tree>
        <div intro>
          <p>表格支持树形数据的展示，可以通过设置 <code>nzLevel</code> 以控制每一层的缩进宽度。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'固定表头'" id="components-table-demo-fixed-header" [nzCode]="NzDemoTableFixedHeaderCode">
        <nz-demo-table-fixed-header demo></nz-demo-table-fixed-header>
        <div intro>
          <p>方便一页内展示大量数据。</p>
          <p>需要手动指定 <code>th</code>和 <code>td</code>的宽度，否则列头和内容可能不对齐。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'可编辑'" id="components-table-demo-edit" [nzCode]="NzDemoTableEditCode">
        <nz-demo-table-edit demo></nz-demo-table-edit>
        <div intro>
          <p>通过自定义模板实现带行编辑功能的表格。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'不显示分页'" id="components-table-demo-nopagination" [nzCode]="NzDemoTableNoPaginationCode">
        <nz-demo-table-nopagination demo></nz-demo-table-nopagination>
        <div intro>
          <p>传入 nzIsPagination 为 false 即可。此时表格将完整显示 nzDataSource 内的数据，不进行任何分页。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'动态控制表格属性'" id="components-table-demo-size" [nzCode]="NzDemoTableSizeCode">
        <nz-demo-table-size demo></nz-demo-table-size>
        <div intro>
          <p>选择不同配置组合查看效果。
          </p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
    </h2>
    <h3><span>nz-table</span>
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzAjaxData</td>
          <td>远程异步数据，与nzDataSource二选一</td>
          <td>Array</td>
          <td>[]</td>
        </tr>
        <tr>
          <td>nzDataSource</td>
          <td>同步数据，与nzAjaxData二选一</td>
          <td>Array</td>
          <td>[]</td>
        </tr>
        <tr>
          <td>nzDataChange</td>
          <td>当前分页数据回调，返回当前分页数据的内容</td>
          <td>Func</td>
          <td>-</td>
        </tr>
        <tr>
          <td>#模板引用变量</td>
          <td>模板引用变量可以自由命名，经过分页之后的数据可以通过<code>模板引用变量.data</code>获取，最后通过*ngFor的方式渲染在table中，关于模板引用变量的知识可以参考
            <a href="https://v2.angular.cn/docs/ts/latest/guide/template-syntax.html#!#ref-vars" target="_blank">这里</a>
          </td>
          <td>NzTableComponent</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzScroll</td>
          <td>表格内容滚动，可用于指定滚动区域的宽度与高度：{{'{'}} x: 1024, y: 300{{'}' }}</td>
          <td>Object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>#nzFixedHeader</td>
          <td>用于定位固定表头，与 <code>nzScroll</code>配合使用</td>
          <td>ng-template</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzTotal</td>
          <td>数据总量，用于与nzAjaxData共同使用</td>
          <td>Number</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzPageIndex</td>
          <td>当前页码，可双向绑定</td>
          <td>Number</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzPageIndexChange</td>
          <td>当前页码变化回调</td>
          <td>Func</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzPageSize</td>
          <td>每页数量，可双向绑定</td>
          <td>Number</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzPageSizeChange</td>
          <td>每页数量变化回调</td>
          <td>Func</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzPageIndexChangeClick</td>
          <td>用户点击页码事件回调</td>
          <td>Func</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzBordered</td>
          <td>是否显示边框</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>table大小</td>
          <td>'small'|'middle'|'default'</td>
          <td>'default'</td>
        </tr>
        <tr>
          <td>nzCustomNoResult</td>
          <td>是否自定义无数据时内容</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>[noResult]</td>
          <td>无数据时内容</td>
          <td>ng-content</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzShowFooter</td>
          <td>是否显示表脚</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>[nz-table-footer]</td>
          <td>表脚内容</td>
          <td>ng-content</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzShowTitle</td>
          <td>是否显示表头</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>[nz-table-title]</td>
          <td>表头内容</td>
          <td>ng-content</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzIsPagination</td>
          <td>是否分页</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzLoading</td>
          <td>是否显示加载中</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzShowSizeChanger</td>
          <td>是否显示pagination中改变页数</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzPageSizeSelectorValues</td>
          <td>pagination中每页显示条目数下拉框值</td>
          <td>Array</td>
          <td>[10, 20, 30, 40, 50]</td>
        </tr>
        <tr>
          <td>nzShowQuickJumper</td>
          <td>是否显示pagination中快速跳转</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzShowTotal</td>
          <td>是否显示总数据量</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzIsPageIndexReset</td>
          <td>数据变更后是否保留在数据变更前的页码</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
      </tbody>
    </table>
    <h3><span>nz-table-sort</span>
    </h3>
    <p>嵌入th中显示排序状态</p>
    <h3><span>nz-table-filter</span>
    </h3>
    <p>与nz-dropdown结合使用，用于过滤表中的数据</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>[nz-table-filter-confirm]</td>
          <td>确定按钮的内容</td>
          <td>ng-content</td>
        </tr>
        <tr>
          <td>[nz-table-filter-clear]</td>
          <td>重置按钮的内容</td>
          <td>ng-content</td>
        </tr>
      </tbody>
    </table>
    <h3><span>[nz-thead]</span>
    </h3>
    <p>标定thead</p>
    <h3><span>[nz-th]</span>
    </h3>
    <p>标定th</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzCheckbox</td>
          <td>是否有checkbox出现在当前th上</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzExpand</td>
          <td>是否是展开按钮列</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzWidth</td>
          <td>当前列的宽度，暂时不支持合并列宽度</td>
          <td>String</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
    <h3><span>[nz-table-body]</span>
    </h3>
    <p>标定tbody</p>
    <h3><span>[nz-tbody-tr]</span>
    </h3>
    <p>标定tbody中tr</p>
    <h3><span>[nz-td]</span>
    </h3>
    <p>标定td</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzCheckbox</td>
          <td>是否有checkbox出现在当前td上</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzExpand</td>
          <td>是否是展开按钮列</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3><span>[nz-table-divider]</span>
    </h3>
    <p>用于td中分隔数据</p>
    <h3>
      <span>nz-row-indent</span>
    </h3>
    <p>与树形数据展示配合使用</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzIndentSize</td>
          <td>控制每一层的缩进宽度</td>
          <td>Number</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
    <h3>
      <span>nz-row-expand-icon</span>
    </h3>
    <p>与可展开和树形数据展示配合使用</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzExpand</td>
          <td>标识是否展开，可双向绑定</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzShowExpand</td>
          <td>是否显示此 展开/收缩 按钮</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
      </tbody>
    </table>

  </section>

</article>