使用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邊框。