使用element-ui table expand展開行實現手風琴效果

寫這篇博客的初衷：官網演示效果爲點擊toggle，已經展開的項不會由於其餘項展開而關閉，因此延伸了下，擴展爲手風琴效果。

根據留言反饋，新增了「修改操做欄文字」、「修改擴展欄內容」功能，完整代碼傳送門：https://github.com/Ele-Cat/element-expand

效果前瞻：

 

官網table expand地址：http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing

先刪減一下代碼：

 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。效果如圖：

 

可是如今咱們尚未實現手風琴效果，修改methods→toogleExpand方法：

1 toogleExpand(row) {
2   let $table = this.$refs.table;
3   this.tableData5.map((item) => {
4     $table.toggleRowExpansion(item, false)
5   })
6   $table.toggleRowExpansion(row)
7 }

table的toggleRowExpansion方法能夠傳兩個參數，第一個參數傳row，第二個參數傳false，意思是合閉expand。咱們把每行的expand關閉一次，再把對應的行打開，這樣就實現了手風琴效果了。

新的問題，當咱們點擊打開了手風琴，每次都至少有一個是打開狀態的，這樣很明顯是bug了，咱們作一下讓已打開行的expand合閉。

bug緣由：當咱們點擊已打開的expand想關閉它時，至關於走了一遍$table.toggleRowExpansion(row, false)後，又走了一遍$table.toggleRowExpansion(row)，因此這行的expand又被打開了。咱們把「合閉/打開「的expand對應的行去除「合閉「操做。

修復toogleExpand方法：

1 toogleExpand(row) {
2   let $table = this.$refs.table;
3   this.tableData5.map((item) => {
4     if (row.id != item.id) {
5       $table.toggleRowExpansion(item, false)
6     }
7   })
8   $table.toggleRowExpansion(row)
9 }

需求結束。

後記：有時候，後臺需求會很紛繁複雜，咱們在使用別人造的輪子時要多研究多思考。