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

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

---
title:
  zh-CN: 显示链接
  en-US: 显示链接
order: 20
---

## zh-CN
显示链接

## en-US
显示链接

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

interface IPerson {
  blog: string;
}

const persons: IPerson[] = [{
  blog: 'baidu.com'
}, {
  blog: 'google.com'
}];

@Component({
  selector: 'components-table-link',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading">
    </bixi-table>
  `
})
export class ComponentsTableSimpleTableLinkComponent {
  loading = false;
  rows = persons;
  cols: ICol[] = [
    {
      name: '基本显示',
      key: 'blog',
      type: EColType.link
    },
    {
      name: '修改显示和链接',
      key: 'blog',
      type: EColType.link,
      value(val: string) {
        return `我的网址是：${ val }`;
      },
      href(val: string, row: IPerson) {
        return `https://www.${ row.blog }?val=${ val }`;
      }
    },
    {
      name: '新窗口打开',
      key: 'blog',
      type: EColType.link,
      target: '_blank',
      href(val: string) {
        return `https://www.${ val }`;
      }
    }
  ];
}

```