Vue element-ui table組件只展開一行(手風琴效果)

直接上代碼了哈~

<template>
  <div class="app-content">
    <div class="table_expand_item">
      <b>element-ui table只展開一行demo</b>
      <el-table
        :data="tableData"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        border
        style="width:750px; margin-top:20px;"
        @expand-change="expandSelect">
        <el-table-column type="expand" label="展開" width="60px">
          <template slot-scope="scope">
            我是表格行展開的信息{{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          align="center" />
        <el-table-column
          prop="name"
          label="姓名"
          align="center" />
        <el-table-column
          prop="address"
          label="地址"
          align="center" />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 'a',
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        id: 'b',
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1517 弄'
      }, {
        id: 'c',
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1519 弄'
      }, {
        id: 'd',
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1516 弄'
      }],
      getRowKeys(row) { // 行數據的Key
        return row.id
      },
      expands: [] // 通過該屬性設置Table目前的展開行，需要設置row-key屬性才能使用，該屬性為展開行的keys數組
    }
  },
  methods: {
    // table每次只能展開一行
    expandSelect(row, expandedRows) {
      this.expands = []
      if (expandedRows.length > 0) {
        row ? this.expands.push(row.id) : ''
      }
    }
  }
}
</script>

結合element-ui官方文檔來閱讀，很快就能搞懂原理~

 

 

如有錯誤，請多指教，謝謝！