el-transfer的入门学习

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body><div id='app'><el-transfer v-model='value' :data='data'></el-transfer><el-transfer v-model='value1' :data='data1' filterable :filter-method='handleFilter'></el-transfer><el-transfer v-model='value2' :data='data2'filterable:titles="['Source','Target']":button-texts="['到左边','到右边']":format="{noChecked:'${total}',hasChecked:'${checked}/${total}'}"@change='handleChange'><el-button class='transfer-footer' slot='left-footer' size='small'>操作</el-button><el-button class='transfer-footer' slot='right-footer' size='small'>操作</el-button></el-transfer><el-transfer v-model='value2' :data='data2' filterable :titles="['Source','Target']":button-texts="['到左边','到右边']":format="{noChecked:'${total}',hasChecked:'${checked}/${total}'}"@change='handleChange'><!-- <span slot-scope='{option}'>{{option.key}} - {{option.label}}</span> --><span slot-scope='scope'>{{scope.option.key}} - {{scope.option.label}}</span><el-button class='transfer-footer' slot='left-footer' size='small'>操作</el-button><el-button class='transfer-footer' slot='right-footer' size='small'>操作</el-button></el-transfer><el-transferv-model='value3':data='data3':props="{key:'value',label:'desc'}"></el-transfer></div>
</body>
</html>
<style>.transfer-footer {margin-left: 20px;padding: 6px 5px;}</style>
<script>new Vue({el:'#app',data(){//key：唯一标识,label：显示文本,disabled：是否禁止转移const generateData = _=>{let data=[];for (let index = 1; index <= 10; index++) {data.push({key:index,label:"备选项"+index,disabled:index % 4 === 0})}return data;};let generateData1 = _=>{let data=[]let city=['合肥','淮北','淮南','巢湖','芜湖','蚌埠']let pinyin=['hefei','huaibei','huainan','chaohu','wuhu','bengbu']city.forEach((value,index)=>{data.push({key:index,label:value,"pinyin":pinyin[index]})})return data}let generateData2 = _=>{let data=[]for (let index = 1; index <= 15; index++){data.push({key:index,label:"备选项"+index,disabled:index%4===0})}return data}let generateData3=_=>{let data=[]for (let index = 1; index <= 15; index++) {data.push({value:index,desc:'备选项'+index})}return data}return{value:[1,4],value1:[1,3],value2:[],value3:[],data:generateData(),data1:generateData1(),data2:generateData2(),data3:generateData3(),}},methods:{// query为搜索的值，item为数组元素，return为true，保留itemhandleFilter(query,item){return item.pinyin.indexOf(query) > -1},// value为value绑定的值，direction为转移方向，right/left，moveKeys为转移的itemKey数组handleChange(value,direction,movedKeys){console.log(value,direction,movedKeys)}}})
</script>

知识点

el-transfer的基本属性，v-model和:data,:data的值是[{key:1,label:'备选项1',disabled:false},{key:2,label:'备选项2',disabled:false}],其中，key是唯一标识，label为显示内容，disabled为是否可选中
filterable属性可以通过搜索框搜索选项，设置filter-method可以自定义搜索事件，事件参数为(query,item),返回值为true，保留item，为false，则过滤
titles可以自定义标题，button-texts可自定义按钮，format可自定义右上角的勾选状态
slot-scope='{option}'配合{{option.key}} - {{option.label}}可自定义显示文本
@change的参数为value,direction,moveKeys，分别对应v-model绑定的数据，方向，移动的key数组
当data中的属性为value,desc时，与key,label不匹配，可以设置:props="{key:'value',label:'desc'}"匹配显示

官网地址

el-transfer官网地址

el-transfer的入门学习相关推荐

java推送叮叮消息,叮叮叮！请及时签收入门学习Java导航路线
原标题:叮叮叮!请及时签收入门学习Java导航路线引言想必有很多像我一样刚学习Java会有很迷茫的人吧,今天给小伙伴们整理了一些资料,有需要的小伙伴们可以私信我,顺便推荐一个免费学习的Qqun,里 ...
messageBox的入门学习
messageBox的入门学习知识点 this.$alert用于弹出消息 this.$confirm用于确认消息,显示取消按钮 this.$prompt用于提交消息,单个数据的提交使用它,复杂的数据 ...
el-avatar入门学习
el-avatar入门学习知识点 size控制大小,可以设置Number,或者字符串large,medium,small shape控制头像形状,默认为circle,可设置为square,为方形 i ...
el-tag入门学习
el-tag入门学习知识点 type属性默认是蓝色,还可以设置success,info,warning,danger size属性默认最大,还可以设置medium,small,mini closab ...
SpringBoot入门学习（五）之旅游网站项目
目录 1.项目需求 2.技术需求 3.pom.xml 4.application.yml 4.MybatisPlus的配置文件 5.springboot中配置日期类型转换器 6.用户管理 7.线路管理 ...
el-table入门学习
el-table入门学习知识点 data为表单数据,格式为[{...},{...},{...}] border显示表格边框 fix默认为左固定,设置为"right"右固定 hei ...
el-drawer的入门学习
el-drawer的入门学习适用场景 el-drawer与el-dialog有几乎相同的API,不同的是el-dialog是居中显示,el-drawer可以根据不同的方向,在上下左右弹出显示知识点 ...
el-menu入门学习
el-menu入门学习知识点首页效果为el-menu中嵌套el-menu-item,el-menu-item中左侧图标填充,右侧文字填充部门效果为el-menu嵌套el-submenu,el-s ...
el-rate入门学习
el-rate入门学习效果图代码 <!DOCTYPE html> <html lang="en"> <head><meta chars ...

el-transfer的入门学习

el-transfer的入门学习

效果图

代码

知识点

官网地址

el-transfer的入门学习相关推荐

最新文章

热门文章