修改el-transfer穿梭框的默认按钮颜色

最新推荐文章于 2024-06-20 21:05:52 发布
最新推荐文章于 2024-06-20 21:05:52 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： css element 文章标签： css elementui 穿梭框 el-transfer html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43817709/article/details/109731263
版权

element的el-transfer穿梭框很好用，但是总有满足不了业务的需求的时候，比如要修改el-transfer穿梭框的默认按钮颜色，如下图
在这里插入图片描述
一般看到这样的需求，我首先会去element的官网看看这个el-transfer穿梭框有没有提供相应的参数来实现，结果去看一下发现没有，只有可以自定义按钮文案，却没有自定义按钮的颜色或样式。怎么办？只好自己去研究默认按钮颜色的css和html是怎么写，然后自己写css进行覆盖默认的样式。

在这里插入图片描述
经过我的研究，发现俩个按钮ccs和html一模一样,但是我只需要修改第一个按钮的颜色。所以想到用css的:nth-of-type(n)选择器，这个选择器可以匹配属于父元素的特定类型的第 N 个子元素的每个元素。也就是我可以用:nth-of-type(1)选到第一个按钮，然后可以写css样式改变颜色，具体代码如下&

最低0.47元/天 解锁文章
码上云端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element UI 穿梭框按钮样式修改
u014012093的博客
07-24 7335
利用Element UI 修改穿梭框的按钮样式 //html部分 <el-transfer v-model="FirsttransferVal" filterable :filter-method="filterMethod"
修改el-transfer穿梭框右侧按钮颜色
qq_46344419的博客
11-14 261
修改el-transfer穿梭框右侧按钮颜色
element ui 限制el-transfer穿梭框传送的数据
dong123456nbnb的博客
08-24 1017
titles="['可选列表', '已选中']"label: `备选项 ${i}`,效果如下，右侧只能放三条数据，可以自己调试。代码如下，直接粘贴复制即可。
修改element-ui的Transfer组件无数据样式
幼儿园园长
07-08 2634
废话不多说，直接说需求上代码 默认穿梭框无数据的样式 设计稿要求的样式 修改方法： 官方没有修改无数据默认样式的API，因此需要css修改默认样式加上背景颜色 // transfer .el-transfer-panel .el-transfer-panel__empty{ height: 100px !important; line-height: 190px !important; width: 88px !important; background: url('../assets
element ui 穿梭框_vue按需引入element Transfer 穿梭框
weixin_39593247的博客
12-22 223
Transfer 穿梭框按需引入Transfer编辑main.jsimport {...Transfer} from 'element-ui';const components = [...Transfer];components.map(component => {Vue.component(component.name, component);});安装transform-vue-jsx...
el-tree-transfer自定义节点图标
weixin_45493439的博客
11-29 2077
el-tree-transfer结合el-tree自定义节点图标（文档地址） 效果图 1、el-tree-transfer是结合element-ui开发的，要想使用先下载 element-ui,在下载el-tree-transfer； npm install element-ui --save npm install el-tree-transfer --save el-tree-transfer可以全局引入或局部引入；全局就是在main.js里导入就行了；局部是在需要的文件夹里导入； import t
Element UI el-transfer穿梭框自定义
weixin_44548681的博客
03-05 3262
el-transfer穿梭框 根据element官网改造成了文字最后图片的样式 但是离目标还差两处地方： 1.数字1处:把原本的显示多少条数据隐藏掉，变成一个文字按钮。 2.数字2处：把第二个搜索框隐藏，只留下第一个。 3.领完两个单选按钮能不能直接在el-transfer中加入？？？ 求大神指点一二，谢谢啦！ <template> <div class="g-treetable-page"> <el-transfer v-model="value"
el-tree实现el-transfer(穿梭框)的效果代码（全）
04-25
勾选右侧的已选资源，效果同左侧一样； 2、勾选全选，则资源全部添加到右侧，左侧的则显示为空 ...4、后台给到的数据是：所有的资源（多维数组）和已分配的资源（一维数组，包含（半勾选）父级数据）
bpo-elt-transfer:基于elementui 的表格穿梭框，参照了elt-transfer
04-16
更改了props 和表格的列定义方式，使其更贴合原生el-transfer 和el-table 的使用。提高了客制化能力，并且使用方式更符合直觉。 安装 npm install bpo-elt-transfer 使用 在main.js文件中引入插件并注册 import ...
el-tree-transfer.rar
04-10
实际上，el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-ui 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
vue+element-ui实现穿梭框数据自定义排序
12-05
vue+element-ui实现穿梭框数据自定义排序 实现了穿梭框右侧数据自定义排序的功能
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
树转移 简介 el-tree-fransfer是一个基于VUE和element-ui的树形...在城市表面找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件，因此就有了el-tree-transfer。轻量，
Element中Transfer 穿梭框的应用
qq_51196135的博客
01-10 2910
1、应用背景 项目中会需要对产品进行选择添加，我们可以用Transfer 穿梭框来实现这一需求。 视图： 2、代码实现 <template> <div class="bigbox"> <div class="topInfo">配置产品</div> <div class="scollbox" style="text-align: center"> <el-transfer st.
前后端分离系列 -- SpringBoot + Vue ElementUI Transfer（穿梭框）组件实现班级学生管理系统 -- 班级模块学生的添加与移除 Transfer不过如此
wanghuichen的博客
01-29 1422
前后端分离系列 -- SpringBoot + Vue ElementUI Transfer（穿梭框）组件实现班级学生管理系统 -- 班级模块学生的添加与移除 Transfer不过如此
vue2.0 + element ui 实现表格穿梭框
qq_34322008的博客
12-16 2832
element ui 官网里介绍了穿梭框（Transfer），但在实际使用过程中，会出现一些问题： 1.穿梭框里能放置的内容太少，不能满足复杂的业务需求。 2.当选项过多时，穿梭框很难实现分页，左右两个框的分页是联动的，左边翻页了右边也会跟着翻页。若要取消这种关联关系，可参考这篇文章： https://www.cnblogs.com/alice-bj/articles/10703903.html#_label4 本文参考了穿梭框的实现思路，实现了可分页的表格穿梭框，同时涉及到了表格多选与表格里添加表单
基于elementui源码实现自定义穿梭框transfer组件
热门推荐
ProgramarQin的博客
07-15 2万+
需求:更改elementui中el-transfer样式， 实现单击左侧选项即加入右边选框，单击右侧选项即可回到左侧选框，中间左右来回按钮更改为左侧全选右侧全选本以为自己能够不看elementui源码实现这需求，在折腾了一天还没实现后，还是回归到其源码进行研究，自己通过纯vue实现主要遇到了以下问题:若是不需要进行模糊查询可通过index进行增删改查实现穿梭框功能，但是若是加入模糊查询则问题百出，...
vue+element做的穿梭框
飞翔༒之翼
09-05 626
先上效果图和需求： 需求： 效果图就是在这些了： HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tra...
elementui Transfer组件 模板
qq_45030898的博客
03-30 1844
1.效果 2.代码实现 <div class="transfer"> <!-- 穿梭框 --> <div style="text-align: center"> <el-transfer style="text-align: left; display: inline-block" v-model
【前端技巧】css篇
最新发布
Moriarty123666的博客
06-20 661
第一个参数为变量名称，第二个参数为初始值，默认为0。
el-transfer穿梭框单选
06-09
要实现 el-transfer 穿梭框单选，可以通过设置 `:show-checkbox` 属性为 `true`，并将 `:check-position` 属性设置为 `left` 或 `right`，然后在 `:data` 属性中为每个选项添加一个 `checked` 属性，用于表示该选项是否已被选中。当用户点击某个选项时，可以在 `@change` 事件中处理选中状态的改变，例如： ```html <el-transfer v-model="selectedData" :data="data" :show-checkbox="true" :check-position="'left'" @change="handleChange" > </el-transfer> ``` ```javascript export default { data() { return { selectedData: [], data: [ { key: '1', label: '选项1', checked: false }, { key: '2', label: '选项2', checked: false }, { key: '3', label: '选项3', checked: false }, { key: '4', label: '选项4', checked: false } ] } }, methods: { handleChange() { // 在 @change 事件中处理选中状态的改变 this.data.forEach(item => { item.checked = this.selectedData.indexOf(item.key) !== -1 }) } } } ``` 这样，就可以实现 el-transfer 穿梭框单选的功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值