Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

基础的表格展示用法。

如果存在 el-table-column 未设置宽度，将会自动计算宽度，同时也不会固定显示表格的总宽度。

当 el-table 元素中注入 model 对象数组后，在 el-table-column 中用 model-key 属性来对应对象中的键名即可填入数据

<el-table [model]="tableData" [scroll-x]="true" center="all">
  <el-table-column model-key="name" label="姓名" width="140">
  </el-table-column>
  <el-table-column model-key="date" label="日期" width="140">
  </el-table-column>
  <el-table-column model-key="address" label="地址" width="140" [render-html]="true">
  </el-table-column>
   <el-table-column label="操作" width="120">
    <ng-template #slot let-scope="scope">
      <el-button type="text" size="small" (click)="handle(scope)">删除</el-button>
    </ng-template>
  </el-table-column>
   <el-table-column label="操作" width="120">
    <ng-template #slot let-scope="scope">
      <el-button type="text" size="small" (click)="handle(scope)">删除</el-button>
    </ng-template>
  </el-table-column>
</el-table>
<script type="text">
// in component
tableData: any[] = [{
  name: '水爷',
  date: '2017-08-19',
  address: '上海市普陀区金沙江路 1518 弄',
}, {
  name: '水爷',
  date: '2017-08-20',
  address: '上海市普陀区金沙江路 1518 弄',
}, {
  name: '水爷',
  date: '2017-08-21',
  address: '上海市普陀区金沙江路 1518 弄',
}, {
  name: '水爷',
  date: '2017-08-22',
  address: '上海市普陀区金沙江路 1510 弄',
}]
</script>

带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

可以使用 stripe 来指定是否开启斑马条纹显示

<el-table [model]="tableData" [stripe]="true">
  <el-table-column model-key="name" label="姓名" width="140">
  </el-table-column>
  <el-table-column model-key="date" label="日期" width="140">
  </el-table-column>
  <el-table-column model-key="address" label="地址">
  </el-table-column>
</el-table>

带边框表格

可以使用 border 来指定是否开启边框

<el-table [model]="tableData" [border]="true">
  <el-table-column model-key="name" label="姓名" width="140">
  </el-table-column>
  <el-table-column model-key="date" label="日期" width="140">
  </el-table-column>
  <el-table-column model-key="address" label="地址">
  </el-table-column>
</el-table>

带状态表格

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

属性 row-class-name 接受一个函数来标识更多的 css 类名。当然不要忘了为你的自定义类名补充样式。

<el-table [model]="tableData" [row-class-name]="rowClassNameFilter">
  <el-table-column model-key="name" label="姓名" width="140">
  </el-table-column>
  <el-table-column model-key="date" label="日期" width="140">
  </el-table-column>
  <el-table-column model-key="address" label="地址">
  </el-table-column>
</el-table>
<script type="text">
// in component
rowClassNameFilter(row: any, index: number): string {
  if (index === 1) {
    return 'info-row';
  } else if (index === 3) {
    return 'positive-row';
  }
  return ''
}
</script>
<style type="text">
.el-table .info-row {
  background: #c9e5f5;
}
.el-table .positive-row {
  background: #e2f0e4;
}
</style>

固定表头

纵向内容过多时，可选择固定表头。

指定高度可自动固定表头

<el-table [model]="tableDataMore" height="300px">
  <el-table-column model-key="name" label="姓名" width="150">
  </el-table-column>
  <el-table-column model-key="date" label="日期" width="150">
  </el-table-column>
  <el-table-column model-key="address" label="地址">
  </el-table-column>
</el-table>

填充内容

可以为列填充固定内容，常用于操作与删除

在获取填充事件时，如果需要 组件的上下文，可以用 let 语法将 scope 传入参数。它包含被点击的按钮元素本身， 点击所在的行，用户数据以及销毁方法等。

<el-table [model]="tableData">
  <el-table-column model-key="name" label="姓名" width="120">
  </el-table-column>
  <el-table-column model-key="date" label="日期" width="120">
  </el-table-column>
  <el-table-column model-key="address" label="地址" >
  </el-table-column>
  <el-table-column label="操作" width="120">
    <ng-template #slot let-scope="scope">
      <el-button type="text" size="small" (click)="handle(scope)">删除</el-button>
    </ng-template>
  </el-table-column>
</el-table>
<script type="text">
// in component
handle(ref: any): void {
  // console.log(ref.index)
  // console.log(ref.rowData)
  // console.log(ref.innerHTML)
  ref.destroy()
}
</script>

多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

注意单个 el-table-column 不要再次嵌套。

<el-table [model]="tableDataMore" [border]="true">
  <el-table-column model-key="name" label="姓名" width="150">
  </el-table-column>
  
  <el-table-column label="其他信息">
    <el-table-column model-key="date" label="日期" width="150"></el-table-column>
    <el-table-column model-key="address" label="地址"></el-table-column>
  </el-table-column>
  
</el-table>

渲染 HTML

当数据为 HTML 时，可使用此功能在 table 中渲染 html 结构。

这里的地址颜色变化是因为数据中地址为 html 片段

<el-table [model]="tableWithHTML" [scroll-x]="true">
  <el-table-column model-key="name" label="姓名">
  </el-table-column>
  <el-table-column model-key="date" label="日期">
  </el-table-column>
  <el-table-column model-key="address" label="地址" [render-html]="true">
  </el-table-column>
</el-table>
<script type="text">
// in Component
tableData: any[] = [{
  name: '火锅',
  date: 2017,
  address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>',
}, {
  name: '重庆小面',
  date: '2017-08-20',
  address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>',
}, {
  name: '海蛎煎',
  date: '2017-08-21',
  address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>',
}, {
  name: '榴莲酥',
  date: '2017-08-22',
  address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>',
}]
</script>

Table Attributes

Table Column Attributes