Select 选择器

类似 Select2 的选择器。

何时使用

• 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
• 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

代码演示

基本

基本使用。

<template>
    <v-select placeholder="请选择人员" style="width: 120px;" :data="options" @change="change"></v-select>
    <v-select placement="top" style="width: 120px;" dropdown-width="240px" :data="options" v-model="value"></v-select>
    <v-select disabled style="width: 120px;"></v-select>
</template>
<script>
    export default {
        data: ()=> ({
            options: [{
                value: '1',
                label: 'lady'
            }, {
                value: '2',
                label: '小强',
                disabled: true
            }, {
                value: '3',
                label: '小明'
            }],
            value: '3'
        }),
        watch: {
            value(val){
                console.log(val)
            }
        },
        methods: {
            change(val) {
                console.log(val)
            }
        }
    }
</script>

自定义选项

通过默认scopedSlot自定义选项显示内容

<template>
    <v-select style="width: 100%" :data="options" v-model="value">
        <template slot-scope="{data}">
            {{data.label}}-{{data.value}}
        </template>
    </v-select>
</template>
<script>
    export default {
        data: ()=> ({
            options: [{
                value: '1',
                label: 'lady'
            }, {
                value: '2',
                label: '小强',
                disabled: true
            }, {
                value: '3',
                label: '小明'
            }],
            value: '3'
        }),
        watch: {
            value(val){
                console.log(val)
            }
        }
    }
</script>

三种大小

三种大小的选择框，当 size 分别为lg和sm时，输入框高度为32px和22px，默认高度为28px

<template>
    <v-select size="lg" style="width: 200px;" :data="options" v-model="value"></v-select>
    <v-select style="width: 200px;" :data="options" v-model="value"></v-select>
    <v-select size="sm" style="width: 200px;" :data="options" v-model="value"></v-select>
</template>
<script>
    export default {
        data: ()=> ({
            options: [{
                value: '1',
                label: 'lady'
            }, {
                value: '2',
                label: '小强',
                disabled: true
            }, {
                value: '3',
                label: '小明'
            }],
            value: '3'
        }),
        watch: {
            value(val){
                console.log(val)
            }
        }
    }
</script>

多选

多选，从已有条目中选择（scroll the menu）

<template>
    <v-select style="width: 100%;" multiple :data="options" :value="['3']"></v-select>
</template>
<script>
    export default {
        data: ()=> ({
            options: [{
                value: '1',
                label: 'lady'
            }, {
                value: '2',
                label: '小强',
                disabled: true
            }, {
                value: '3',
                label: '小明'
            }]
        })
    }
</script>

带搜索框

展开后可对选项进行搜索。

<template>
    <v-select search style="width: 120px;" :data="options"></v-select>
    <br><br>
    <v-select search multiple style="width: 100%" :data="options"></v-select>
</template>
<script>
     export default {
         data: ()=> ({
             options: [{
                 value: '1',
                 label: 'lady'
             }, {
                 value: '2',
                 label: '小强',
                 disabled: true
             }, {
                 value: '3',
                 label: '小明'
             }]
         })
     }
</script>

搜索过滤

使用 filter 进行自定义的搜索

<template>
    <v-select search style="width: 120px;" :filter="filter" :data="filterOptions"></v-select>
    <br><br>
    <v-select search multiple style="width: 100%" :filter="filter" :data="filterOptions"></v-select>
</template>
<script>
     export default {
         data: ()=> ({
             filterOptions: [{
                value: '1',
                label: '河北',
                jp: 'HB',
                qp: 'HeiBei',
            }, {
                value: '2',
                label: '河南',
                jp: 'HN',
                qp: 'HeiNan',
            }, {
                value: '3',
                label: '海南',
                jp: 'HN',
                qp: 'HaiNan',
            }],
         }),
         methods: {
             filter(val, item) {
                const input = val.toLocaleUpperCase();
                return item.label.startsWith(input) ||
                        item.jp.startsWith(input) ||
                        item.qp.startsWith(input);
            },
         }
     }
</script>

分组

用嵌套的数据结构进行选项分组。

<template>
    <v-select style="width: 200px" :data="groupOpt" :value="'lp'"></v-select>
    <v-select style="width: 200px" multiple :data="groupOpt" :value="['lp']"></v-select>
</template>
<script>
    export default {
        data: ()=> ({
            groupOpt: [{
                label: '重庆',
                options: [{
                    value: 'lp',
                    label: '梁平'
                }, {
                    value: 'wz',
                    label: '万州',
                    disabled: true
                }]
            }, {
                label: '四川',
                options: [{
                    value: 'cd',
                    label: '成都'
                }, {
                    value: 'dz',
                    label: '达州'
                }]
            }]
        })
    }
</script>

远程搜索

从服务器搜索数据，输入关键字进行查找

<template>
    <v-select style="width: 200px" search :loading="loading" :remote-method="remoteMethod" :data="remoteOption"></v-select>
    <br><br>
    <v-select style="width: 100%" search multiple :loading="loading2" :remote-method="remoteMethod2" :data="remoteOption"></v-select>
</template>
<script>
    export default {
        data: ()=> ({
            list: [],
            states: ["Alabama", "Alaska", "Arizona",
                "Arkansas", "California", "Colorado",
                "Connecticut", "Delaware", "Florida",
                "Georgia", "Hawaii", "Idaho", "Illinois",
                "Indiana", "Iowa", "Kansas", "Kentucky",
                "Louisiana", "Maine", "Maryland",
                "Massachusetts", "Michigan", "Minnesota",
                "Mississippi", "Missouri", "Montana",
                "Nebraska", "Nevada", "New Hampshire",
                "New Jersey", "New Mexico", "New York",
                "North Carolina", "North Dakota", "Ohio",
                "Oklahoma", "Oregon", "Pennsylvania",
                "Rhode Island", "South Carolina",
                "South Dakota", "Tennessee", "Texas",
                "Utah", "Vermont", "Virginia",
                "Washington", "West Virginia", "Wisconsin",
                "Wyoming"],
            loading: false,
            loading2: false,
            remoteOption: []
        }),
        mounted(){
            this.list = this.states.map(item => {
                return { value: item, label: item };
            });
        },
        methods: {
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.remoteOption = this.list.filter(item => {
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.remoteOption = [];
                }
            },
            remoteMethod2(query) {
                if (query !== '') {
                    this.loading2 = true;
                    setTimeout(() => {
                        this.loading2 = false;
                        this.remoteOption = this.list.filter(item => {
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.remoteOption = [];
                }
            }
        }
    }
</script>

API

Select Props

Data Props

Select Events