写这篇博客的初衷:官网演示效果为点击toggle,已经展开的项不会因为其他项展开而关闭,所以延伸了下,扩展为手风琴效果。

效果前瞻:



 

官网table expand地址:
http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing
<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 }
需求结束。

后记:有时候,后台需求会很纷繁复杂,我们在使用别人造的轮子时要多研究多思考。