Vue+style 动态样式绑定（收藏图标）

写bug断了电

于 2021-03-23 16:00:59 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/fyydashen/article/details/115127744

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何在Element UI的表格中使用Vab-Icon组件实现行级收藏状态的切换，通过`:icon`和`:style`属性展示星形图标并实时改变颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要代码：

0：未收藏

1：已收藏

<vab-icon :icon="row.is_collect == 1 ? 'star-fill' : 'star-line'" :style="{ color: row.is_collect == 1 ? 'orange' : '' }" />

效果截图：

代码：

<el-table
  v-loading="listLoading"
  :data="grouplist"
  border
>
  <el-table-column align="center" type="selection" />
  <el-table-column align="center" width="55">
    <template #default="{ row }">
      <vab-icon
        :icon="row.is_collect == 1 ? 'star-fill' : 'star-line'"
        :style="{ color: row.is_collect == 1 ? 'orange' : '' }"
      />
    </template>
  </el-table-column>
</el-table>