动态修改element-ui的图标

1,077 阅读1分钟

需求效果

image.png

image.png

  • 最开始使用的是icon="el-icon-d-arrow-left"设置el-button图标,但是发现此时使用$refs修改icon属性时虽然可以生效,但是会有警告

image.png 查了一下是说子组件修改了父组件的传值。

  • 最后发现除了使用icon以外还可以直接用给标签添加类名的方式设置图标
  • 实现方式:用v-bind指令和三目运算符修改类名
<el-button :class="open ? 'el-icon-d-arrow-left':'el-icon-d-arrow-right'"  ref="icon"  @click="menuClose"></el-button>