elementUI点击el-card选中边框变色
要实现当选中某一个卡片时其边框颜色变色，你可以通过 Vue 的状态管理和条件绑定类来实现。下面是具体的实现步骤：
- 在 data 中定义一个状态来追踪选中的卡片。
- 在 el-card上绑定点击事件来更新选中的状态。
- 使用条件绑定类来应用选中的样式。
<template><el-dialog v-model="knowledgeVisible" title="选择知识库" width="600"><el-row :gutter="20"><el-col :span="12" v-for="(knowledge, index) in knowledgeList" :key="index"><el-card :class="{ 'is-selected': selectedCardIndex === index }":shadow="never"class="knowledge-card"@click="selectCard(index)"><div style="display: flex; align-items: center; margin-bottom: 10px;"><img src="https://ai.zscampus.com/aistatic/img/logoV.png" style="width: 10%; margin-right: 5px;"><span class="pc-material-title">{{ knowledge.knowledge_name }}</span></div><span class="pc-material-time">创建时间: {{ knowledge.create_time }}</span></el-card></el-col></el-row></el-dialog>
</template><script>
export default {data() {return {knowledgeVisible: false,selectedCardIndex: null, // 追踪选中的卡片索引knowledgeList: [// 示例数据{ knowledge_name: '知识库1', create_time: '2024-01-01' },{ knowledge_name: '知识库2', create_time: '2024-02-01' },],};},methods: {selectCard(index) {this.selectedCardIndex = index; // 更新选中的卡片索引},},
};
</script><style scoped>
/* 默认卡片样式 */
.knowledge-card {transition: border-color 0.3s ease;
}/* 选中卡片的样式 */
.is-selected {border: 2px solid #409eff; /* 选中时的边框颜色 */
}
</style>解释
- 状态管理：
selectedCardIndex 用于追踪当前选中的卡片索引。
knowledgeList 数组保存卡片的数据。
- 点击事件：
每个 el-card 绑定了 @click 事件，当点击卡片时，会调用 selectCard 方法并传递当前卡片的索引。
selectCard 方法更新 selectedCardIndex，从而更新选中的状态。
- 样式应用：
使用 :class 绑定，根据 selectedCardIndex 的值来应用 is-selected 类。
.is-selected 类定义了选中时的边框颜色。