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

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

---
title:
  zh-CN: 显示文本
  en-US: 显示文本
order: 0
---

## zh-CN
显示文本

## en-US
显示文本

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

interface IPerson {
  name: string;
  info: {
    age: number;
  }
}
const persons: IPerson[] = [{
  name: '小明',
  info: {
    age: 12,
  }
}, {
  name: '小丽',
  info: {
    age: 14,
  }
}];

@Component({
  selector: 'components-table-text',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading">
    </bixi-table>
`
})
export class ComponentsTableSimpleTableTextComponent {
  loading = false;
  type = 'test this';
  rows = persons;
  cols: ICol[] = [
    {
      name: '默认文字',
      key: 'name',
      onClick: (item: IPerson) => {
        console.warn('click', item);
      }
    },
    {
      name: '关闭 tooltip',
      tooltip: false,
      key: 'name'
    },
    {
      name: '修改 tooltip',
      key: 'name',
      tooltip: (name: string, person: IPerson) => {
        return `${name} 今年 ${person.info.age} 岁了`;
      },
    },
    {
      name: '固定宽度',
      key: 'name',
      width: "20px",
      ellipsis: true,
    },
    // 取值方式是 get(row, 'key')，也就是说你可以这么取数据 'me.info.age'
    {
      name: '深度取值',
      key: 'info.age'
    },
     {
      name: '点击事件',
      key: 'name',
      onClick: (person: IPerson) => {
        console.warn(this.type, person);
      }
    },
  ];
}
```