問題講解：
在使用vue版本的ElementUI中的table功能的時候仍是遇到了一些問題，能夠說餓了麼團隊在這個UI框架的文檔撰寫已經很是不錯了，不過仍是有一些方法乍一看讓人摸不着頭腦，有些table的經常使用功能示例代碼提供的不是很是詳細，因此此次針對這個可展開表格實現手風琴效果寫一篇博客探討一下。
先展現一下ElementUI官方提供的示例代碼效果圖html
能夠看到官方代碼中在這邊沒有讓這個可展開table自動摺疊的功能，我點擊了別的標籤頁後上次點擊的行仍舊處在一個展開的狀態，並且操控的方式也只能點擊到左上角的小箭頭才能夠控制行的展開狀態，體驗不是特別好，能夠說有點糟糕了，可是我後來在後面的文檔中發現The methods 裏面有寫到一個方法叫toggleRowExpansion，這個方法應該是官方本意上想讓咱們來自由控制展開狀態的，從傳遞的兩個參數來看，一個是row（當前點擊的行id），另外一個是expended（行展開狀態，boolean值），看上去有理有據，可是就是不知道怎麼用，由於我始終沒法獲取到expended這個參數的值，有點氣，因此此次咱們用另外一種方式來實現這個功能。vue
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邊框。this
一樣的，toggleRowExpansion方法也支持手風琴效果，點擊展開本身的同時關閉原先除本身以外的已打開的展開項，實現手風琴，修改methods→toogleExpand方法：spa
toogleExpand(row) { let $table = this.$refs.table; this.tableData5.map((item) => { $table.toggleRowExpansion(item, false) }) $table.toggleRowExpansion(row) }
table的toggleRowExpansion方法能夠傳兩個參數，第一個參數傳row，第二個參數傳false，意思是合閉expand。咱們把每行的expand關閉一次，再把對應的行打開，這樣就實現了手風琴效果了。3d
新的問題，當咱們點擊打開了手風琴，每次都至少有一個是打開狀態的，這樣很明顯是bug了，咱們作一下讓已打開行的expand合閉。code
bug緣由：當咱們點擊已打開的expand想關閉它時，至關於走了一遍$table.toggleRowExpansion(row, false)後，又走了一遍$table.toggleRowExpansion(row)，因此這行的expand又被打開了。咱們把「合閉/打開「的expand對應的行去除「合閉「操做。orm
修復toogleExpand方法：htm
toogleExpand(row) { let $table = this.$refs.table; this.tableData5.map((item) => { if (row.id != item.id) { $table.toggleRowExpansion(item, false) } }) $table.toggleRowExpansion(row) }
點擊展開內容時，遍歷外層數組，找到除了當前點擊的展開項以外的行，關閉除本身以外的已展開項，而後展開或者關閉當前點擊的行。
嗯，就醬啦~
原文出處：https://www.cnblogs.com/jiajialove/p/11477679.html