写这篇博客的初衷：官网演示效果为点击toggle，已经展开的项不会因为其他项展开而关闭，所以延伸了下，扩展为手风琴效果
官网table expand地址：
先删减一下代码：
1 <template> 2 <el-table ref="table" border stripe highlight-current-row :data="tableData5"> 3 <el-table-column label="商品 ID" prop="id"> 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="操作"> 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"> 15 <template slot-scope="props"> 16 <el-form label-position="left" inline> 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>