bixi/packages/core/table/demo/simple-table-template.md

企业级中后台前端解决方案

---
title:
  zh-CN: 传入模版
  en-US: 传入模版
order: 50
---

## zh-CN
你可以通过传入模板的方式完全定制化显示内容, type='header' 可以自定义表头

## en-US
你可以通过传入模板的方式完全定制化显示内容, type='header' 可以自定义表头

```ts
import { Component } from '@angular/core';
import { EColType, ICol } from '@bixi/core/table';

interface IPerson {
  name: string;
}
const persons: IPerson[] = [{
  name: '阿李',
}, {
  name: '小王',
}];

@Component({
  selector: 'components-table-template',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading">
       <ng-template bixi-row='buttonRef' let-row let-index="index">
        <button nzType="primary" nz-button>{{index}} - {{ row.name }}</button>
      </ng-template>
       <ng-template bixi-row='inputRef' let-row let-index="index">
        <input nz-input  [(ngModel)]="row.name" disabled/>
      </ng-template>
      <ng-template bixi-row='headerRef' type='header'>
        <nz-tag [nzColor]="'blue'">自定义表头</nz-tag>
      </ng-template>
    </bixi-table>
`
})
export class ComponentsTableSimpleTableTemplateComponent {
  loading = false;
  rows = persons;
  cols: ICol[] = [
     {
      name: '正常显示',
      key: 'name'
    },
    {
      name: '通过模板来显示按钮',
      key: 'name',
      type: EColType.template,
      // 指定使用哪个模版
      ref: 'buttonRef'
    },
     {
      name: '通过模板来显示输入框',
      key: 'name',
      type: EColType.template,
      // 指定使用哪个模版
      ref: 'inputRef'
    },
    {
      nameRef: 'headerRef',
      key: 'name'
    }
  ];
}
```