1. 前言
如果是开发功能型的网站，例如各类信息管理系统，那么表格的使用频率会相当之高。
实际上，我们的数据存储到数据库，不就是以表格的形式存在吗？所以在界面上显示、操作，使用表格来处理也是非常合理的。
本篇就来介绍下el-table表格组件的使用方法。
2. 基本用法
针对如下数据：
tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }], 可以使用el-table将数据展示为表格，代码如下： 基本用法 <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
解释下，el-table表示表格组件，data属性用来绑定数据列表。
el-table-column表示表格的一列，prop属性用于指定该列绑定数据列表的属性名，label是列的显示名称，width用于指定列宽度。
注意，一般最后一列的宽度我们不指定，这样的话可以自动占满剩余空间。
上述代码效果如下：
3. 显示斑马纹
为表格添加stripe属性，即可开启斑马纹，由于斑马纹效果较好，所以一般都是开启的。
显示斑马纹 <el-table :data="tableData" stripe> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
效果如下：
4. 显示边框
边框就不用说了，基本所有表格，带上边框会效果更好一些。添加border属性即可显示边框：
带边框 <el-table :data="tableData" border> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
效果如下，注意最外围的灰色框线，是我截图时候添加的，不是网页实际效果。
5. 自定义尺寸
通过将size设置为medium/small/mini，可以调整表格尺寸，例如mini：
自定义尺寸--medium / small / mini <el-table :data="tableData" size="mini" border> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
效果如下，很明显更加紧凑了。
6. 显示索引
可以添加一列，并将列类型设置为type，即可自动显示索引：
显示索引 <el-table :data="tableData" border> <el-table-column label="序号" type="index" width="100"> </el-table-column> <el-table-column prop="date" label="日期" width="300"> </el-table-column> <el-table-column prop="name" label="姓名" width="300"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> </el-table>
7. 显示内容过长时的提示
当某列数据内容超过列宽度时，可以通过为列添加show-overflow-tooltip属性，展示提示信息。
显示内容过长时的提示 <el-table :data="tableData" border> <el-table-column prop="date" label="日期" width="100" show-overflow-tooltip> </el-table-column> <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip> </el-table-column> <el-table-column prop="address" label="地址" width="100" show-overflow-tooltip> </el-table-column> </el-table>
效果如下：
8. 自定义行样式
如果自带的样式无法满足需求，还可以自定义样式：
自定义行样式 <el-table :data="tableData" border :row-class-name="tableRowClassName"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> 如上代码，行样式由tableRowClassName方法决定，代码如下： tableRowClassName({ row, rowIndex }) { if (rowIndex === 0) { return 'warning-row'; } else if (rowIndex === 1) { return 'success-row'; } return ''; },
最终效果如下：
9. 固定表头
如果表格行数较多，那么往下滚动界面时，会看不到表格的标题，这无疑是体验不佳的。el-table只需要设定一个高度，就能固定表头：
固定表头 <el-table :data="tableData" border height="120"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
10. 固定列
当表格中列数过多时，el-table会展示横向滚动条，但是有时候我们希望一些列，如操作按钮所在的列，能够固定住，此时可以使用fixed属性：
固定列： <el-table :data="tableData" border> <el-table-column prop="date" label="日期" width="300"> </el-table-column> <el-table-column prop="name" label="姓名" width="300"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table>
11. 多级表头
实际上多级表头el-table的实现非常简单，直接在el-table-column内部嵌套el-table-column即可。
数据部分：
cityData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
表格组件：
多级表头
<el-table :data="cityData" border>
<el-table-column prop="date" label="日期" width="150">
</el-table-column>
<el-table-column label="配送信息">
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column label="地址">
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column prop="city" label="市区" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" width="300">
</el-table-column>
<el-table-column prop="zip" label="邮编">
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
效果如下：
12. 展开行
有时候如果信息特别多，我们可以设计点击左侧按钮后，在当前行下方展示详细信息。
展开行
<el-table :data="tableData" border>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left">
<el-form-item label="日期">
<span>{{ props.row.date }}</span>
</el-form-item>
<el-form-item label="姓名">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="地址">
<span>{{ props.row.address }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
</el-table>
注意，展开行的类型需要为expand，然后可以通过slot-scope指定的props来取出当前行的数据，按照我们想要的方式展现即可。如上代码效果如下：
13. 自定义列模板
我们可以完全自定义列里面的显示内容：
自定义列模板
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期" width="180">
<template slot-scope="scope">
{{scope.row.date.replaceAll('-','')}}
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button @click="btnView(scope.row)" type="primary" size="small">查看</el-button>
<el-button type="danger" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
如上代码中，我们通过在列中间添加如下内容，template中间的内容可以随意定制，而且可以通过scope.row拿到当前行的数据。
<template slot-scope="scope">
{{scope.row.date.replaceAll('-','')}}
</template>
效果如下：
14. 单选
通过添加highlight-current-row属性即可开启单选功能，然后可以通过@current-change指定选中项发生变化时触发的方法。
单选
<el-table :data="tableData" border highlight-current-row @current-change="handleCurrentChange">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
handleCurrentChange(row) {
console.log(row);
效果如下：
15. 多选
可以通过添加type值为selection的列，来启用多选功能，然后@selection-change可以指定选中项变化时触发的方法。
多选(显示复选框)
<el-table :data="tableData" ref="multipleTable" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="100">
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="btnGetSelection()">获取选中项</el-button>
</div>
JS代码如下：
handleSelectionChange(selection) {
console.log(selection);
},
btnGetSelection() {
let selection = this.$refs.multipleTable.selection;
console.log(selection);
}
上述代码中，通过this.$refs.multipleTable.selection可以获取到当前所有选中项信息，便于提交时使用。
16. 前端排序
el-table还支持前端排序，我们直接看演示代码：
前端排序
<el-table :data="tableData" border :default-sort="{prop: 'date', order: 'descending'}">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
通过default-sort，指定了按date列排序，且是降序。所以效果如下：
17. 小结
el-table的功能还是相当全面的，本篇按我自己的理解讲解了一些经常会用到的用法，供大家参考。
