Vue Element UI: Expand One Row, Collapse Others in El-Table

You can achieve this by maintaining the state of the expanded rows in your component's data and updating it when a row is expanded or collapsed. Here's how you can do it using the 'expand-change' event in '':

<template>
  <div>
    <el-table :data='tableData' @expand-change='expandClick'>
      <el-table-column type='expand'>
        <!-- Content of the expanded row -->
      </el-table-column>
      <!-- Other table columns -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // Your table data
      ],
      expandedRows: [] // Array to store the expanded row keys
    };
  },
  methods: {
    expandClick(row, expanded) {
      if (expanded) {
        // Close all other expanded rows
        this.expandedRows = [row.key];
      } else {
        // Remove the current row key from the expanded rows
        this.expandedRows = [];
      }
    }
  }
};
</script>

In the code above, we are using the 'expandedRows' array to keep track of the expanded rows. When a row is expanded, we update the 'expandedRows' array with the current row key and close all other expanded rows. When a row is collapsed, we empty the 'expandedRows' array.

Make sure to replace '' with the content you want to display when a row is expanded.