ElementUI浅尝辄止15：Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
Table组件比较常用，常见于数据查询，报表页面，用来展示表格数据。
1.如何使用？
//当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中
//的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
2.带斑马纹表格
使用带斑马纹的表格，可以更容易区分出不同行的数据。
//stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。
3.带边框表格
默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。
4.带状态表格
可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
//可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
5.固定表头
纵向内容过多时，可选择固定表头。
//只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
6.固定列
横向内容过多时，可选择固定列。
固定列需要使用fixed属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。
查看
编辑
7.固定列和表头
横纵内容过多时，可选择固定列和表头
固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
8.流体高度
当数据量动态变化时，可以为 Table 设置一个最大高度。
//通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
移除
9.多级表头
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
10.单选
选择单行数据时使用色块表示。
//Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。
//之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。
//如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。
选中第二行
取消选择
11.多选
选择多行数据时使用 Checkbox。
//实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；
//默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，
//它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
{{ scope.row.date }}
切换第二、第三行的选中状态
取消选择
12.排序
对表格进行排序，可快速查找或对比数据。
//在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 //Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
13.筛选
对表格进行筛选，可快速查找到自己想看的数据。
//在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
清除日期过滤器
清除所有过滤器
{{scope.row.tag}}
14.自定义列模板
自定义列的显示内容，可组合其他组件使用。
//通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
{{ scope.row.date }}
姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }}
编辑
删除
15.展开行
当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
//通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。
{{ props.row.name }}
{{ props.row.shop }}
{{ props.row.id }}
{{ props.row.shopId }}
{{ props.row.category }}
{{ props.row.address }}
{{ props.row.desc }}
16.树形数据与懒加载
//支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
17.自定义表头
表头支持自定义。
//通过设置 Scoped slot 来自定义表头。
Edit
Delete
18. 表尾合计行
若表格展示的是各类数字，可以在表尾显示各列的合计。
//将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
19.合并行或列
多行或多列共用一个数据时，可以合并行或列。
//通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
20.自定义索引
自定义 type=index 列的行号。
//通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。