Select 下拉选择框

规则

基础示例

const rule = {
    type: 'select',
    title: '下拉选择',
    field: 'select',
    value: 'Wednesday',
    props: {
        title: '预约',
        options: [
            { text: '周一', value: 'Monday' },
            { text: '周二', value: 'Tuesday' },
            { text: '周三', value: 'Wednesday' },
            { text: '周四', value: 'Thursday' },
            { text: '周五', value: 'Friday' },
        ],
        placeholder: '请选择',
    }
}

Props 配置示例

单选下拉框

const rule = {
    type: 'select',
    title: '商品分类',
    field: 'category',
    value: '1',
    props: {
        title: '选择分类',
        options: [
            { text: '电子产品', value: '1' },
            { text: '服装配饰', value: '2' },
            { text: '家居用品', value: '3' },
        ],
        placeholder: '请选择分类',
    }
}

多列选择

const rule = {
    type: 'select',
    title: '省市区',
    field: 'address',
    value: [],
    props: {
        title: '选择地址',
        options: [
            [
                { text: '浙江', value: 'zhejiang' },
                { text: '福建', value: 'fujian' },
            ],
            [
                { text: '杭州', value: 'hangzhou' },
                { text: '温州', value: 'wenzhou' },
            ],
            [
                { text: '西湖区', value: 'xihu' },
                { text: '余杭区', value: 'yuhang' },
            ],
        ],
    }
}

自定义按钮文字

const rule = {
    type: 'select',
    title: '预约时间',
    field: 'time',
    value: '',
    props: {
        title: '选择时间',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        options: [
            { text: '09:00', value: '09:00' },
            { text: '10:00', value: '10:00' },
            { text: '11:00', value: '11:00' },
        ],
    }
}

Events 事件示例

监听选择变化

const rule = {
    type: 'select',
    title: '下拉选择',
    field: 'select',
    value: '',
    props: {
        title: '预约',
        options: [
            { text: '周一', value: 'Monday' },
            { text: '周二', value: 'Tuesday' },
        ],
        placeholder: '请选择',
    },
    on: {
        confirm: (result) => {
            console.log('确认选择:', result);
        },
        cancel: () => {
            console.log('取消选择');
        },
        change: (result) => {
            console.log('选择值改变:', result);
        },
    },
}

选择后联动更新

const rule = [
    {
        type: 'select',
        title: '商品分类',
        field: 'category',
        value: '',
        props: {
            title: '选择分类',
            options: [
                { text: '电子产品', value: '1' },
                { text: '服装配饰', value: '2' },
            ],
        },
        inject: true,
        on: {
            confirm: ($inject, result) => {
                // 根据分类加载对应的子分类
                const value = result.selectedValues[0];
                if (value === '1') {
                    $inject.api.updateRule('subcategory', {
                        props: {
                            options: [
                                { text: '手机', value: '11' },
                                { text: '电脑', value: '12' },
                            ]
                        }
                    });
                } else if (value === '2') {
                    $inject.api.updateRule('subcategory', {
                        props: {
                            options: [
                                { text: '男装', value: '21' },
                                { text: '女装', value: '22' },
                            ]
                        }
                    });
                }
            },
        },
    },
    {
        type: 'select',
        title: '子分类',
        field: 'subcategory',
        props: {
            title: '选择子分类',
            options: [],
            placeholder: '请先选择分类',
            disabled: true,
        },
    },
]

完整配置项:Vant_Picker

value :Number | String

Options

字段名	说明	字段类型	是否必填	默认值
value	参数值	String,Number	true	-
text	字段别名	String	true	-
disabled	设置为禁用状态	Boolean	false	false

Props

参数	说明	类型	默认值
disabled	是否禁用输入	boolean	false
options	对象数组，配置每一列显示的数据	PickerOption[] | PickerOption[][]	[]
columns-field-names	自定义 options 结构中的字段	object	{ text: 'text', value: 'value', children: 'children' }
title	顶部栏标题	string	-
confirm-button-text	确认按钮文字，设置为空字符串可以隐藏按钮	string	确认
cancel-button-text	取消按钮文字，设置为空字符串可以隐藏按钮	string	取消
toolbar-position	顶部栏位置，可选值为 bottom	string	top
loading	是否显示加载状态	boolean	false
readonly	是否为只读状态，只读状态下无法切换选项	boolean	false
show-toolbar	是否显示顶部栏	boolean	true
allow-html	是否允许选项内容中渲染 HTML	boolean	false
option-height	选项高度，支持 px vw vh rem 单位，默认 px	number | string	44
visible-option-num	可见的选项个数	number | string	6
swipe-duration	快速滑动时惯性滚动的时长，单位 ms	number | string	1000

Events

事件名	说明	回调参数
confirm	点击完成按钮时触发	{ selectedValues, selectedOptions, selectedIndexes }
cancel	点击取消按钮时触发	{ selectedValues, selectedOptions, selectedIndexes }
change	选中的选项改变时触发	{ selectedValues, selectedOptions, selectedIndexes, columnIndex }
click-option	点击选项时触发	{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }
scrollInto	当用户通过点击或拖拽让一个选项滚动到中间的选择区域时触发	{ currentOption, columnIndex }