涉及知識點：

　　1、不點選小箭頭，點選其他列中的某個按鈕展開行內容。

　　2、隱藏小箭頭列（既然我們點選表格其他單元格展開行內容了，一般就不需要小箭頭列了）

　　3、只展開一行內容

先直接上程式碼：

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

自己專案中遇到的問題是想要隱藏小箭頭列，無意間發現這篇文章，原來只需要設定width="1" 就行了。

因為我設定了<el-table-column type="expand" width="1"></el-table-column> 會多出1px的邊距，所以我們可以再在最外層放一個空的div，設定樣式overflow:hidden；
再設定此table的樣式margin-left:1px；好了，完美實現。（自己的專案中沒有遇到1px影響效果的情況，可以直接設定寬度為1px即可）

放上專案最終的效果圖，無多出的1px邊框。

同樣的，toggleRowExpansion方法也支援手風琴效果，點選展開自己的同時關閉原先除自己之外的已開啟的展開項，實現手風琴，修改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  }

點選展開內容時，遍歷外層陣列，找到除了當前點選的展開項之外的行，關閉除自己之外的已展開項，然後展開或者關閉當前點選的行。

嗯，就醬啦~

參考文章：https://www.cnblogs.com/jiajialove/p/11477679.html