element 表格展开行实现手风琴效果（不改变展示，只覆盖功能）

使用element表格开发时需要用到expand展开，官网示例没有手风琴展开效果，那就自己想办法实现

Table Methods中有这么一个方法，应该可以实现，现在就是改造table

Snipaste_2021-03-05_11-09-06.png

• 要实现展开，需要设置type=expand,这是默认的展开行，这个现在肯定是不满足我们的需求，所以设置width=1（隐藏原本的展开列），这样设置完后页面中会有展开图标，css设置一下display:none即可

<el-table-column type="expand" width="1">
     <template slot-scope="scope">
       <physics-data :row="scope.row"></physics-data>
     </template>
</el-table-column>

• 自定义实现，那么我们就需要有一列来充当原本展开行的角色

<el-table-column width="60">
  <template slot-scope="scope">
    <span 
      class="table-expand-default el-icon-arrow-right" 
      :class="{'current-row_expanded': currentRowId === scope.row.id && scope.row.expanded}" 
      @click="expanedChange(scope.row)"></span>
  </template>
</el-table-column>

• 自定义展开/收起事件，这里需要注意，因为我们是使用自定义列代替原本展开的角色，所以为了保持原有功能，这里需要注意以下几点，（如果使用文字/按钮作为展开点击按钮，以下步骤可以忽略）
  1. 需要动态绑定一个class来处理当前行展开/收起时按钮图标显示，
  2. toggleRowExpansion()实现展开/收起，要实现手风琴，我们需要先遍历所有数据，收起展开行，将当前点击行展开，注意遍历时里面的操作；
  3. 前面两步完成后，发现当我们点击自定义展开按钮，可以实现手风琴效果，但是在当前行点击时会有bug出现，按钮图标的展示是乱的，这里就需要再加一层判断，代码在下面，这里只做记录

export default = {
  methods:{
    expanedChange(row){
      let appTable = this.$refs.appTable
      if(!this.currentRowId){
        this.currentRowId = row.id
        row.expanded = true;
        appTable.toggleRowExpansion(row)
      }else if(this.currentRowId === row.id){
        if(row.expanded){
          appTable.toggleRowExpansion(row,false)
        }else{
          appTable.toggleRowExpansion(row)
        }
        row.expanded = !row.expanded
      }else if(row.id !== this.currentRowId){
        this.currentRowId = row.id
        row.expanded = true
        this.tableData.map(item => {
          if(row.id !== item.id){
            appTable.toggleRowExpansion(item,false)
          }
        })
        appTable.toggleRowExpansion(row)
      }
    },
  }
}

注意点:

在开发过程中，刚开始的实现是使用table原有的方法 expand-change ，但是在这个方法中去实现手风琴的效果会造成程序卡死，控制台一看是有无限循环造成zhan