el-transfer的入门学习

自律最差的编程狗

已于 2022-06-06 13:30:08 修改

阅读量1.9k

点赞数

分类专栏： element-ui 文章标签： elementui

于 2022-06-06 13:28:36 首次发布

本文链接：https://blog.csdn.net/qq_40765784/article/details/125144730

版权

element-ui 专栏收录该内容

43 篇文章 20 订阅

订阅专栏

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-transfer
        v-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，保留item
            handleFilter(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'}"匹配显示