使用element-ui中table expand展开行控制显示隐藏（手风琴效果）

问题讲解：
在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。
先展示一下ElementUI官方提供的示例代码效果图

可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后上次点击的行仍旧处在一个展开的状态，而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态，体验不是特别好，可以说有点糟糕了，但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion，这个方法应该是官方本意上想让我们来自由控制展开状态的，从传递的两个参数来看，一个是row（当前点击的行id），另一个是expended（行展开状态，boolean值），看上去有理有据，但是就是不知道怎么用，因为我始终无法获取到expended这个参数的值，有点气，所以这次我们用另一种方式来实现这个功能。

1 <template>
 2   <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
 3     <el-table-column label="商品 ID" prop="id" width="100">
 4     </el-table-column>
 5     <el-table-column label="商品名称" prop="name">
 6     </el-table-column>
 7     <el-table-column label="描述" prop="desc">
 8     </el-table-column>
 9     <el-table-column label="操作" width="100">
10       <template slot-scope="scope">
11         <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
12       </template>
13     </el-table-column>
14     <el-table-column type="expand" width="1">
15       <template slot-scope="props">
16         <el-form label-position="left" inline class="demo-table-expand">
17           <el-form-item label="商品名称">
18             <span>{{ props.row.name }}</span>
19           </el-form-item>
20         </el-form>
21       </template>
22     </el-table-column>
23   </el-table>
24 </template>
25 
26 <script>
27 export default {
28   data() {
29     return {
30       tableData5: [{
31         id: '1',
32         name: '好滋好味鸡蛋仔1',
33         desc: '荷兰优质淡奶，奶香浓而不腻1',
34       }, {
35         id: '2',
36         name: '好滋好味鸡蛋仔2',
37         desc: '荷兰优质淡奶，奶香浓而不腻2',
38       }, {
39         id: '3',
40         name: '好滋好味鸡蛋仔3',
41         desc: '荷兰优质淡奶，奶香浓而不腻3',
42       }, {
43         id: '4',
44         name: '好滋好味鸡蛋仔4',
45         desc: '荷兰优质淡奶，奶香浓而不腻4',
46       }]
47     };
48   },
49   methods: {
50     toogleExpand(row) {
51       let $table = this.$refs.table;
52       $table.toggleRowExpansion(row)
53     }
54   }
55 }
56 </script>

我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。效果如图：

因为我设置了<el-table-column type="expand" width="1"></el-table-column> 会多出1px的边距，所以我们可以再在最外层放一个空的div，设置样式overflow:hidden；
再设置此table的样式margin-left:1px；好了，完美实现。

放上项目最终的效果图，无多出的1px边框。

 

同样的，toggleRowExpansion方法也支持手风琴效果，点击展开自己的同时关闭原先除自己之外的已打开的展开项，实现手风琴，修改methods→toogleExpand方法：

 toogleExpand(row) {
   let $table = this.$refs.table;
   this.tableData5.map((item) => {
     $table.toggleRowExpansion(item, false)
   })
   $table.toggleRowExpansion(row)
 }

table的toggleRowExpansion方法可以传两个参数，第一个参数传row，第二个参数传false，意思是合闭expand。我们把每行的expand关闭一次，再把对应的行打开，这样就实现了手风琴效果了。

新的问题，当我们点击打开了手风琴，每次都至少有一个是打开状态的，这样很明显是bug了，我们做一下让已打开行的expand合闭。

bug原因：当我们点击已打开的expand想关闭它时，相当于走了一遍$table.toggleRowExpansion(row, false)后，又走了一遍$table.toggleRowExpansion(row)，所以这行的expand又被打开了。我们把“合闭/打开“的expand对应的行去除“合闭“操作。

修复toogleExpand方法：

 toogleExpand(row) {
   let $table = this.$refs.table;
  this.tableData5.map((item) => {
     if (row.id != item.id) {
       $table.toggleRowExpansion(item, false)
    }
   })
   $table.toggleRowExpansion(row)
 }

点击展开内容时，遍历外层数组，找到除了当前点击的展开项之外的行，关闭除自己之外的已展开项，然后展开或者关闭当前点击的行。

嗯，就酱啦~