使用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)
}

需求結束。

后記：有時候，后台需求會很紛繁復雜，我們在使用別人造的輪子時要多研究多思考。