问题讲解：
在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。
先展示一下ElementUI官方提供的示例代码效果图
可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后上次点击的行仍旧处在一个展开的状态，而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态，体验不是特别好，可以说有点糟糕了，但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion，这个方法应该是官方本意上想让我们来自由控制展开状态的，从传递的两个参数来看，一个是row（当前点击的行id），另一个是expended（行展开状态，boolean值），看上去有理有据，但是就是不知道怎么用，因为我始终无法获取到expended这个参数的值，有点气，所以这次我们用另一种方式来实现这个功能。
代码实现：
核心是 row-key、expand-row-keys属性
特别要注意的是row-key传入的是一个Function(row)，而expand-row-keys传入的是一个数组，元素的值是要展开的row的key。
row-key这个属性是获取当前行号的，expand-row-keys这个属性是获取到展开的行号的，所以前者为一个单值，而后者是一个数组形式，所以这个属性也同样适用于表格多选列这种情况。
<el-table
:data="compony"
style="width: 100%;margin-top:80px"
:row-key="getRowKeys"
:expand-row-keys="expands"
@current-change="toggleRowExpansion">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="公司名称">
<span>{{ props.row.com_name }}</span>
</el-form-item>
<el-form-item label="下属电厂ID">
<span>{{ props.row.fct_id }}</span>
</el-form-item>
<el-form-item label="电厂名称">
<span>{{ props.row.fct_name }}</span>
</el-form-item>
<el-form-item label="用户名">
<span>{{ props.row.user_name }}</span>
</el-form-item>
<el-form-item label="密码">
<span>{{ props.row.password }}</span>
