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

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

---
title:
  zh-CN: 显示进度
  en-US: 显示进度
order: 30
---

## zh-CN
显示进度。progress 可以直观帮助您显示动态变化的数据，bixi-table 内置了五种进度状态。

## en-US
显示进度。progress 可以直观帮助您显示动态变化的数据，bixi-table 内置了五种进度状态。

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

interface IPerson {
  name: string;
  progress: number;
}
const persons: IPerson[] = [{
  name: '终止',
  progress: 0.7,
}, {
  name: '进行中',
  progress: 0.3,
}, {
  name: '失败',
  progress: 0.6,
}, {
  name: '成功', 
  progress: 1,
}, {
  name: '处理中', 
  progress: 0.5,
}];

@Component({
  selector: 'components-table-progress',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading">
    </bixi-table>
`
})
export class ComponentsTableSimpleTableProgressComponent {
  loading = false;
  rows = persons;
  cols: ICol[] = [
    {
      name: '进度',
      key: 'name',
    },
    {
      name: '显示进度',
      key: 'progress',
      width: '200px',
      type: EColType.progress,
      status: (val) => {
        if (val === 0.7) {
          return EProgressStatus.starting;
        }

        if (val === 0.3) {
          return EProgressStatus.stop;
        }

        if (val === 1) {
          return EProgressStatus.success;
        }

        if (val === 0.6) {
          return EProgressStatus.failed;
        }

        return EProgressStatus.processing;
      }
    }
  ];
}
```