为了实现在所有message-card
中只有一个被选中,你需要在数据模型中设置一个全局的选中状态。当一个message-card
被选中时,其他所有的message-card
都应该被取消选中。以下是一个示例代码:
javascriptdata() {
return {
selectedCard: null, // 记录全局选中的message-card的标识
lists: [
// ... 你的数据 ...
],
// 其他数据...
};
},
methods: {
selectCard(cardId) {
// 设置全局选中的message-card的标识
this.selectedCard = cardId;
}
}
在模板中:
html<el-collapse v-model="activeNames">
<el-collapse-item v-for="(item, groupIndex) in lists" :key="groupIndex" :title="item.name" :name="groupIndex.toString()">
<div class="message-card"
v-for="(item2, cardIndex) in item.sublist"
:key="cardIndex"
:class="{ 'is-selected': selectedCard === `${groupIndex}-${cardIndex}` }"
@click="selectCard(`${groupIndex}-${cardIndex}`)">
<!-- message-card的内容 -->
</div>
</el-collapse-item>
</el-collapse>
在这个示例中,selectedCard
是一个字符串,它的值是被选中的message-card
的标识,这个标识由el-collapse-item
的索引(groupIndex
)和sublist
中message-card
的索引(cardIndex
)组成。当message-card
被点击时,selectCard
方法会被调用,并更新selectedCard
的值。然后,:class
指令会动态地为被选中的message-card
添加is-selected
类。请注意,这只是一个示例,实际的代码可能需要根据你的数据和需求进行调整。例如,如果你的message-card
有多个层级或分组,你可能需要使用一个更复杂的方法来跟踪选中的卡片。