TlTable

angular table组件：

DEMO

angular 开发版本 9.1.12.

安装

npm i tl-table --save

引用

在 app.component.ts 中引入

import { TlTableModule } from 'tl-table';
...
imports:[
    ...
    TlTableModule,
]

使用

html:

<tl-table [tableData]="tableData">
    <tl-table-column [key]=" item.key" [label="item.label" *ngFor="let item of headData">
    </tl-table-column>
</tl-table>

ts:

headData = [
    {label: '姓名', key: 'name'},
    {label: '年龄', key: 'age'},
    {label: '手机号', key: 'mobile'}
]
tableData = [
{
    name: {label: '张三'},
    age: {label: 18},
    mobile: {label: '18100000001'
},
{
    name: {label: '李四'},
    age: {label: 28},
    mobile: {label: '18100000002'},
},
{
    name: {label: '王五'},
    age: {label: 38},
    mobile: {label: '18100000003'},
}
]