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

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

---
title:
  zh-CN: 显示状态
  en-US: 显示状态
order: 21
---

## zh-CN
状态是表格中常见的显示功能，可以让用户直观地感受到数据的状态，bixi-table 提供了五种内置的 status

## en-US
状态是表格中常见的显示功能，可以让用户直观地感受到数据的状态，bixi-table 提供了五种内置的 status

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

interface IPerson {
  status: string;
}
const persons: IPerson[] = [{
  status: 'success',
}, {
  status: 'processing',
}, {
  status: 'error'
}, {
  status: 'default'
}, {
  status: 'stop'
}];

@Component({
  selector: 'components-table-status',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading">
    </bixi-table>
  `
})
export class ComponentsTableSimpleTableStatusComponent {
  loading = false;
  rows = persons;
  cols: ICol[] = [
     {
      name: '状态',
      key: 'status',
    },
    {
      name: '显示状态',
      key: 'status',
      type: EColType.status
    }
  ];
}
```