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

最新推荐文章于 2024-11-29 00:34:07 发布

AI研思录

最新推荐文章于 2024-11-29 00:34:07 发布

阅读量1.1k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端 CSS 文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_43589681/article/details/140802027

要实现当选中某一个卡片时其边框颜色变色，你可以通过 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"