选择框(vSelect)

下拉选择框内部直接调用了下拉列表组件,也可以直接参考下拉列表

单组件引入

import <name> from ‘vucc/select’;

示例


单选框 select:



单选框 (别名)



单选框禁用



单选框可输入搜索




代码 V

<v-select @click.stop="buttonClick($event)" :data="dropDownData" :append-style="{width: '200px'}" v-model="dropDownValue"></v-select>
<v-select :data="dropDownData2" :as-label="'desc'":append-style="{width: '200px'}" v-model="dropDownValue"></v-select>
<v-select :data="dropDownData" :is-disabled="true" v-model="dropDownValue"></v-select>
<v-select :data="dropDownData" :is-edit-able="true" v-model="dropDownValue"></v-select>


data() {
    return {
        // dropdown
        dropDownData: [{
            value: 0,
            label: 0
        }, {
            value: 1,
            label: 'value1',
            renderLi: function () {
                return `<a>111</a>`
            }
        }, {
            value: 2,
            label: 'value2',
            isDisabled: true
        }],
        dropDownData2: [{
            value: 0,
            desc: 'value0'
        }, {
            value: 1,
            desc: 'value1',
            renderLi: function () {
                return `<a>111</a>`
            }
        }, {
            value: 2,
            desc: 'value2',
            isDisabled: true
        }],
        dropDownValue: 0
    }
}



属性

参数 说明 类型 可选值 默认值
data 传入组件数据,用于渲染,data内部的3个可选值,展示label的优先级为,randerLi > label > value,具体使用方法参看综合示例 Object - -
isOpened 下拉列表是否显示 Boolean - false
value 下拉列表的值 String/Number - ‘’
isDisabled 下拉列表是否可以选择 Boolean - false
isEditAble 下拉列表是否可编辑,如果可编辑,则展示框变成输入框,并自带过滤功能 Boolean - false
filter 下拉列表选项过滤器,传入Function时,会自动传入data.optsList作为参数,方便过滤,当传入`Number String, Number/String/Function - ‘’

方法

参数 说明 类型 可选值 默认值
onSelect 下拉列表选择函数 Function index 当前选择的元素在列表中的位置, value 当前选择元素的值 -
← 单选框(vRadio) 下拉多选框(vMultiSelect) →