ElementUI Table with Collapse Option (Accordion Style)

table.vue

<template>
  <el-table
    ref="table"
    row-key="someKey"
    @row-click="rowClick"
    @expand-change="expandChange"
    :data="data"
  >
    <el-table-column type="expand">
      <template v-slot:default="{ row }">
        ...
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
import { ElTable } from "element-ui/types/table";

export default defineComponent({
  ...
  methods: {
    rowClick(row: any) {
      (this.$refs.table as ElTable).toggleRowExpansion(row);
      this.$emit("selected", row);
    },

    expandChange(row: any, expanded: any[]) {
      const rows = [...expanded];

      if (rows.length > 1) {
        rows.pop();
        rows.forEach(row => (this.$refs.table as ElTable).toggleRowExpansion(row));
      }
    },
  },
});
</script>