如何在 Vue3 中使用 Element Plus 修改穿梭框中间按钮的图标？

Question

如何在 Vue3 中使用 Element Plus 修改穿梭框中间按钮的图标？

飘逸的单杠

53

发布于
2 月 22 日四川

新手上路，请多包涵

vue3 使用element Plus 穿梭框如何修改中间按钮的icon

添加插槽然后自己写btn按钮不太行

阅读 132

AI BotBETA

解决方案：使用插槽+CSS覆盖图标样式

在Element Plus的Transfer组件中，可以通过以下两种方式修改中间按钮图标：

使用插槽+自定义图标（推荐）：

<template>
  <el-transfer v-model="value" :data="data">
 <template #left-footer>
   <el-button class="el-transfer__button">
     <el-icon><CaretRight /></el-icon>
   </el-button>
 </template>
 <template #right-footer>
   <el-button class="el-transfer__button">
     <el-icon><CaretLeft /></el-icon>
   </el-button>
 </template>
  </el-transfer>
</template>

<script setup>
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
// 记得先注册图标组件
</script>

纯CSS覆盖方式：

/* 覆盖右侧按钮图标 */
.el-transfer__buttons .el-button:first-child .el-icon {
  transform: rotate(180deg);
}
.el-transfer__buttons .el-button:first-child i {
  font-size: 16px; /* 调整大小 */
}

注意事项：

必须保留.el-transfer__button这个class才能保持原有布局
使用Element Plus的图标组件时需要先注册对应图标
按钮点击事件会自动继承，不需要手动绑定
如果使用自定义SVG图标，直接替换<el-icon>中的内容即可

建议优先使用插槽方案，相比纯CSS方案更易维护，且能保持Element Plus的样式一致性。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

如何在 Vue3 中使用 Element Plus 修改穿梭框中间按钮的图标？

你尚未登录，登录后可以

如何在Vue3和Element Plus中实现周范围选择器功能？

vue3 实现一个列表水平居中的同时，可以左右滑动？

Vue2与Vue3哪个更适合用于以表格为主的网站开发？

如何实现一个无限滚动列表，并分页加载？

vue3项目yarn install 安装依赖时报错怎么解决？

为什么在.env中定义的变量没有生效?

使用echart报Cannot read properties of undefined (reading 'type')报错，该如何解决？