bixi/packages/core/editable-table/demo/editable-footer.md

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

---
title:
  zh-CN: 自定义 footer
order: 3
---

## zh-CN

自定义 footer，不需要 footer 时，直接将 `footer` 设为 `null`。

## en-US

```ts
import { Component, ViewChild } from '@angular/core';
import { BixiEditableTableComponent } from '@bixi/core/editable-table';

@Component({
  selector: 'bixi-editable-demo-footer',
  template: `
    <bixi-editable-table [(ngModel)]="rows" [cols]="cols" [footer]="tpl" #editableTable></bixi-editable-table>
    <ng-template #tpl>
      <div>自定义 footer</div>
    </ng-template> 
  `
})
export class TestComponent {
  @ViewChild('editableTable') editableTable: BixiEditableTableComponent;

  cols = [
    {
      key: 'name',
      name: '审核点'
    },
    {
      key: 'relation',
      name: '关系'
    },
    {
      key: 'content',
      name: '风险内容'
    },
    {
      key: 'desc',
      name: '问题描述'
    }
  ];
  rows = [
    {
      name: '组合1',
      relation: '等于',
      content: '字段1',
      desc: 'A类型'
    },
    {
      name: '组合2',
      relation: '小于',
      content: '字段2',
      desc: 'B类型'
    },
    {
      name: '组合3',
      relation: '大于',
      content: '字段3',
      desc: 'C类型'
    }
  ]
}
```