Vue.js 使用 @expand-change 扩展一条记录时关闭其他记录

To close other records when expanding one record in Vue.js, you can follow these steps:

1. Add a 'isOpen' property to each record object in your data model to track whether the record is expanded or not. Set it to 'false' initially for all records.

data() {
  return {
    records: [
      { id: 1, content: 'Record 1', isOpen: false },
      { id: 2, content: 'Record 2', isOpen: false },
      { id: 3, content: 'Record 3', isOpen: false },
      // ... other records
    ]
  };
},

2. In your template, use a 'v-for' loop to render the records, and bind the 'isOpen' property to the 'expand' or 'collapse' class based on its value.

<div v-for='record in records' :key='record.id'>
  <div @click='expandClick(record)' :class='{ expand: record.isOpen, collapse: !record.isOpen }'>
    {{ record.content }}
  </div>
</div>

3. Implement the 'expandClick' method in your Vue component to handle the click event and toggle the 'isOpen' property of the clicked record. Additionally, loop through all the records and close the ones that are not the clicked record.

methods: {
  expandClick(clickedRecord) {
    this.records.forEach(record => {
      if (record.id === clickedRecord.id) {
        // Toggle the clicked record
        record.isOpen = !record.isOpen;
      } else {
        // Close other records
        record.isOpen = false;
      }
    });
  }
}

4. Style the 'expand' and 'collapse' classes in your CSS to control the appearance of the expanded and collapsed states.

.expand {
  /* styles for expanded state */
}

.collapse {
  /* styles for collapsed state */
}

Now, when you click on a record, it will expand and close other records.