使用element-ui table expand展开行实现手风琴效果

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

根据留言反馈，新增了“修改操作栏文字”、“修改扩展栏内容”功能，完整代码传送门：https://github.com/Ele-Cat/element-expand

效果前瞻：

官网table expand地址：http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing

先删减一下代码：

 <template>
   <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
     <el-table-column label="商品 ID" prop="id" width="100">
     </el-table-column>
     <el-table-column label="商品名称" prop="name">
     </el-table-column>
     <el-table-column label="描述" prop="desc">
     </el-table-column>
     <el-table-column label="操作" width="100">
       <template slot-scope="scope">
         <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
       </template>
     </el-table-column>
     <el-table-column type="expand" width="1">
       <template slot-scope="props">
         <el-form label-position="left" inline class="demo-table-expand">
           <el-form-item label="商品名称">
             <span>{{ props.row.name }}</span>
           </el-form-item>
         </el-form>
       </template>
     </el-table-column>
   </el-table>
 </template>

 <script>
 export default {
   data() {
     return {
       tableData5: [{
         id: '1',
         name: '好滋好味鸡蛋仔1',
         desc: '荷兰优质淡奶，奶香浓而不腻1',
       }, {
         id: '2',
         name: '好滋好味鸡蛋仔2',
         desc: '荷兰优质淡奶，奶香浓而不腻2',
       }, {
         id: '3',
         name: '好滋好味鸡蛋仔3',
         desc: '荷兰优质淡奶，奶香浓而不腻3',
       }, {
         id: '4',
         name: '好滋好味鸡蛋仔4',
         desc: '荷兰优质淡奶，奶香浓而不腻4',
       }]
     };
   },
   methods: {
     toogleExpand(row) {
       let $table = this.$refs.table;
       $table.toggleRowExpansion(row)
     }
   }
 }
 </script>

后台中，我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。效果如图：

但是现在我们还没有实现手风琴效果，修改methods→toogleExpand方法：

 toogleExpand(row) {
   let $table = this.$refs.table;
   this.tableData5.map((item) => {
     $table.toggleRowExpansion(item, false)
   })
   $table.toggleRowExpansion(row)
 }

table的toggleRowExpansion方法可以传两个参数，第一个参数传row，第二个参数传false，意思是合闭expand。我们把每行的expand关闭一次，再把对应的行打开，这样就实现了手风琴效果了。

新的问题，当我们点击打开了手风琴，每次都至少有一个是打开状态的，这样很明显是bug了，我们做一下让已打开行的expand合闭。

bug原因：当我们点击已打开的expand想关闭它时，相当于走了一遍$table.toggleRowExpansion(row, false)后，又走了一遍$table.toggleRowExpansion(row)，所以这行的expand又被打开了。我们把“合闭/打开“的expand对应的行去除“合闭“操作。

修复toogleExpand方法：

 toogleExpand(row) {
   let $table = this.$refs.table;
   this.tableData5.map((item) => {
     if (row.id != item.id) {
       $table.toggleRowExpansion(item, false)
     }
   })
   $table.toggleRowExpansion(row)
 }

需求结束。

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