elementUI点击el-card选中边框变色

要实现当选中某一个卡片时其边框颜色变色，你可以通过 Vue 的状态管理和条件绑定类来实现。下面是具体的实现步骤：

1. 在 data 中定义一个状态来追踪选中的卡片。
2. 在 el-card上绑定点击事件来更新选中的状态。
3. 使用条件绑定类来应用选中的样式。

<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 类定义了选中时的边框颜色。