问题讲解：
在使用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