为了实现在所有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有多个层级或分组，你可能需要使用一个更复杂的方法来跟踪选中的卡片。