穿梭框iview

╰半橙微兮° 2022-03-27 08:40 284阅读 0赞

# 穿梭框 #

双栏穿梭选择框，常用于将多个项目从一边移动到另一边。

## 说明 ##

Transfer 组件主要基于以下四个 API 来使用：

:data：总体数据，数组，每项为一个对象，且必须含有 key 值，组件基于此做索引。  
:target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛**选到右边**。  
:render-format：每行数据显示的格式函数，默认优先显示 label 值，没有时显示 key 值，可以自己组合出需要的数据格式。  
@on-change：当点击转移按钮时，组件本身并不会转移数据，而是触发事件，由用户来操作数据。  
示例：

export default {
        data () {
            return {
                data: [
                    { "key": "1", "label": "Content 1", "disabled": false },
                    { "key": "2", "label": "Content 2", "disabled": true },
                    { "key": "3", "label": "Content 3", "disabled": false }
                ],
                targetKeys: ["1","2"]
            }
        },
        methods: {
            render (item) {
                return item.key + ':' + item.label;
            },
            onChange (newTargetKeys) {
                this.targetKeys = newTargetKeys;
            }
        }
    }

## 选择框的穿梭框 ##

<template>
        <Transfer
            :data="data2"
            :target-keys="targetKeys2"
            filterable
            :filter-method="filterMethod"
            @on-change="handleChange2"></Transfer>
    </template>
    <script>
        export default {
            data () {
                return {
                    data2: this.getMockData(),
                    targetKeys2: this.getTargetKeys()
                }
            },
            methods: {
                getMockData () {
                    let mockData = [];
                    for (let i = 1; i <= 20; i++) {
                        mockData.push({
                            key: i.toString(),
                            label: 'Content ' + i,
                            description: 'The desc of content  ' + i,
                            disabled: Math.random() * 3 < 1
                        });
                    }
                    return mockData;
                },
                getTargetKeys () {
                    return this.getMockData()
                            .filter(() => Math.random() * 2 > 1)
                            .map(item => item.key);
                },
                handleChange2 (newTargetKeys) {
                    this.targetKeys2 = newTargetKeys;
                },
                filterMethod (data, query) {
                   
                    return data.label.indexOf(query) > -1;
                }
            }
        }
    </script>

通过设置属性filterable可以自定义搜索函数,里面的搜索框是重点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxvd29ybGRkbQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxvd29ybGRkbQ_size_16_color_FFFFFF_t_70]: /images/20220327/f795d3ad7d244de4863ffa3a02587f09.png