iview transfer穿梭框

最新推荐文章于 2022-06-09 14:47:21 发布
最新推荐文章于 2022-06-09 14:47:21 发布
阅读量1.1k 收藏
点赞数
分类专栏： working 文章标签： iview transfer 穿梭框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43739375/article/details/103028322
版权

穿梭框上显示的数据是renderFormat函数渲染上去的：
在这里插入图片描述
在这里插入图片描述

mockData是transfer绑定的data，是数组
mockData的key和label都是id值
在这里插入图片描述

filterMethod是自定义搜索函数，在搜索的时候调用，搜索到需要的数据，参数为 data 和 query，data 为项，query 为当前输入的搜索词，默认搜索label
在这里插入图片描述

targetKeys数组，放的是id
listStyle是两个穿梭框的自定义样式
写上filterable属性是显示搜索框

handleChange函数是选项在两栏之间转移时的回调函数，返回值是targetKeys
在这里插入图片描述

想吃可爱多
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue +iview（table）+element-ui 自己写的穿梭框
Quiet_123的博客
11-21 2616
一。布局 <template> <div class="settingparC"> <div class="settingLeft"> <Table ref="selection" @on-select="checkAll" height="390" border :columns=&
iview 之 穿梭框 transfer
weixin_30363981的博客
03-28 1282
概述 双栏穿梭选择框，常用于将多个项目从一边移动到另一边。 说明 Transfer 组件主要基于以下四个 API 来使用： :data：总体数据，数组，每项为一个对象，且必须含有key值，组件基于此做索引。 :target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。 （注意是 ...
关于iview的穿梭框Transfer基本使用
weixin_44671162的博客
03-26 4271
效果图 <-- 这是html部分 --> <Transfer :data="data1" :target-keys="targetKeys1" :render-format="render1" @on-change="handleChange1"> </Transfer> // 这是 js初始化...
基于iview-封装定制化的穿梭框组件
a5252145的博客
05-28 1583
基于iview-封装定制化的穿梭框组件 PM那边需求如下： ** 效果图如下：** 代码如下： <template> <!-- 穿梭组件 --> <div class="transferTpl"> <div class="left"> <div class="title"> <span>{{ leftTitle }}</span>
穿梭框iview
helloworlddm的博客
01-12 5562
穿梭框 双栏穿梭选择框，常用于将多个项目从一边移动到另一边。 说明 Transfer 组件主要基于以下四个 API 来使用： :data：总体数据，数组，每项为一个对象，且必须含有 key 值，组件基于此做索引。 :target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。 :render-format：每行数据显示的格式函...
iview后台框架
03-13
自己写的一个iview前台框架，有需要的拿去改改就能用了
iView框架问题整理小结
10-17
主要介绍了iView框架问题整理小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview-admin框架升级VueCli4.0
最新发布
11-16
iview-admin开源框架的版本太旧了已经不再更新，并且大概率安装启动会报错，主要报错原因为:node版本过高、框架中markdown组件不兼容、升级后less版本过高等问题，经过长期适配升级了iview官网开源的admin框架，将其...
vue+iview+canvas 画框并改变大小
08-05
iview 3.0后台框架 内有iview系列插件与ueditor组件 有登录页面，账户与密码随意输入 登录后可直接操作 切换题目与答案画相应的框并拖动拉伸达到你所要的区域，还可以实时修改标题 运行环境 先运行npm install ...
vue后台管理系统iview框架
07-03
适用大部分vue2.0后台管理系统，iview框架开发后台系统 最新资源 信息系统
完善的vue+elementui的自定义transfer组件
10-16
对之前已做的transfer组件做完善，新增已选列表搜索功能，修复搜索数据重复问题
iview中的内置样式如何更改，iview中怎么使用框架中的类名类修改样式
热门推荐
weixin_39818813的博客
10-09 1万+
这个问题真是困扰了这么久了。之前一直没查出来怎么去改，一直是通过行内样式来修改。 问题： 当一个元素封装了很多层时，我们无法找到里面封装的那个标签，所以无法要通过行内样式去修改。 解决： 方法一：直接重置样式 ---最简单的办法 直接重置样式 比如我们要修改iview中的封装的ivu-layout-header这个class类对应的样式 先在浏览器找到影响样式的类名： iv...
VUE Element-ui transfer 使用心得
bodypc的博客
12-25 4313
VUE Element-ui transfer 使用心得 前段时间由于项目中需要写穿梭框 在网上找了很多例子都不太符合业务需求 先上图 看看我的大体业务场景 这些是新建时候的业务场景这个业务场景很简单 这是编辑业务场景主要是回显 <div class="transfer_box"> <span class="transfer_element">...
iview的穿梭框中加入列名
wytraining
06-09 342
设置iview穿梭框中的列名
VUE 自定义 穿梭框
qq_31565213的博客
09-13 5246
某次项目要使用穿梭框进行数据选择，项目使用的element-ui框架，框架中的穿梭框是这样子的： 好像不能满足我的需求，因为需要展示很多内容，包括图片等信息，也要加上很多样式等等，我尝试这去改造，一会后觉得还是自己动手去写一个靠谱。几经鼓捣效果如下： 基本上实现了一个穿梭框。以上是展示内容，不包含实际使用。具体可以自定义实现其中的渲染格式。比如 上干货 <template> <div class="shuttle" :style="{'height':...
iView组件样式修改
weixin_30496431的博客
06-28 2844
使用深度作用选择器/deep/ 如果你希望scoped样式中的一个选择器能够作用的更深，例如影响子组件，你可以使用 >>> 操作符: <style scoped> .a >>> .b { ... } </style> 有些像Sass之类的预处理器无法正确解析 >>> ,这种情况下你可以使用 /deep/操作符取而...
vue+iview 自定义实现穿梭框
zoupeng199的博客
07-17 2894
vue+iview 自定义实现穿梭框 因业务需求iview穿梭框不满足业务需求自己写了个穿梭框。因本人是后端，请各位大佬看到了也可帮忙优化下。只实现了基本功能 表格及模态框代码 <Fotem label="选择缴费学员" v-if="applyModelForm.licenseType == null || applyModelForm.planId != null"> <div class="searchs" v-if="this.buttonNumber==1||this.butt
修改view 的style（参照系统默认样式 简单模仿即可实现，简单又实用）
ccccccccccc12345的博客
06-23 2648
写给自己：       参照系统默认样式 简单模仿即可实现，简单又实用，以后不必再去网上搜搜，或去照抄原来写过的代码了，每次都能轻松面对了。    以前遇到 自定义seekbar ,progressPar等的样式时总是摸不到头脑，不知道要如何修改 ，总是要去项目中寻找并拷贝别的同事写的代码，感觉自己low 到极点，今天终于想弄懂一些基本知识点，以备以后自己能随手写出来。 其实每一个系统原声控
Vue自定义组件之穿梭框 --可适应较多数据
weixin_47276928的博客
05-24 2344
穿梭框 该组件是个穿梭框，因为使用了 滚动加载，所以支持数据量较大的情况。 基于 Vue 、element-ui 的 【Checkbox 多选框】& 【Input 输入框】& 【InfiniteScroll 无限滚动】 代码分析 <template> <div class="transfer-wrapper"> <div class="flex-dir-column padd-all-15"> <el
iview穿梭框怎么写
03-25
iview的穿梭框可以使用 Transfer 组件实现，具体代码如下： <template> <Transfer :data="data" :target-keys="targetKeys" :render-format="renderFormat" @on-change="handleChange" /> </template> <script> import { Transfer } from 'iview' export default { data () { return { data: [ { key: '1', title: '选项1', description: '选项1的描述信息' }, { key: '2', title: '选项2', description: '选项2的描述信息' }, { key: '3', title: '选项3', description: '选项3的描述信息' } ], targetKeys: [], renderFormat: ({ title, description }) => `${title} - ${description}` } }, components: { Transfer }, methods: { handleChange (targetKeys) { this.targetKeys = targetKeys } } } </script>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值