Select 列选择器

17:06

说明

底部弹出的列选择器，基于 picker-view 实现，用布尔 v-model 控制弹出与收起，list 数据全部由外部传入。支持 single-column（单列）、mutil-column（多列独立）、mutil-column-auto（树形 children 联动）三种模式，confirm 回传各列选中的 { value, label }。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

单列模式

mode=single-column，list 传一维数组。

查看源码

<template>
    <ux-button @click="show = true">打开选择器</ux-button>
    <text v-if="result !== ''" class="result">选择结果: {{ result }}</text>
    <ux-select
        v-model="show"
        mode="single-column"
        :list="list"
        :default-value="[2]"
        title="单选选择器"
        @confirm="onConfirm"
    />
</template>

<script setup lang="uts">
import type { SelectListItem } from '@/uni_modules/uview-pro-x';

const show = ref<boolean>(false);
const result = ref<string>('');

const list: SelectListItem[] = [
    { label: '选项一', value: 1 },
    { label: '选项二', value: 2 },
    { label: '选项三', value: 3 },
    { label: '选项四', value: 4 }
];

function onConfirm(value: UTSJSONObject[]): void {
    if (value != null && value.length > 0) {
        result.value = value[0]['label'] as string;
    }
}
</script>

<style scoped>
.result {
    margin-top: 10px;
    font-size: 13px;
    color: #909399;
}
</style>

多列模式

mode=mutil-column，list 传二维数组。

查看源码

<template>
    <ux-button @click="show = true">打开选择器</ux-button>
    <text v-if="result !== ''" class="result">选择结果: {{ result }}</text>
    <ux-select
        v-model="show"
        mode="mutil-column"
        :list="list"
        :default-value="[0, 0]"
        title="多列选择器"
        @confirm="onConfirm"
    />
</template>

<script setup lang="uts">
import type { SelectListItem } from '@/uni_modules/uview-pro-x';

const show = ref<boolean>(false);
const result = ref<string>('');

const list: SelectListItem[][] = [
    [
        { label: '亚洲', value: 'asia' },
        { label: '欧洲', value: 'europe' }
    ],
    [
        { label: '中国', value: 'cn' },
        { label: '日本', value: 'jp' }
    ]
];

function joinLabels(value: UTSJSONObject[]): string {
    if (value == null) return '';
    const labels: string[] = [];
    for (let i = 0; i < value.length; i++) {
        const label = value[i]['label'] as string;
        if (label != null && label !== '') {
            labels.push(label);
        }
    }
    return labels.join(' / ');
}

function onConfirm(value: UTSJSONObject[]): void {
    result.value = joinLabels(value);
}
</script>

<style scoped>
.result {
    margin-top: 10px;
    font-size: 13px;
    color: #909399;
}
</style>

多列联动

mode=mutil-column-auto，通过 children 实现联动。

查看源码

<template>
    <ux-button @click="show = true">打开选择器</ux-button>
    <text v-if="result !== ''" class="result">选择结果: {{ result }}</text>
    <ux-select
        v-model="show"
        mode="mutil-column-auto"
        :list="list"
        :default-value="[0, 0, 0]"
        title="级联选择器"
        @confirm="onConfirm"
    />
</template>

<script setup lang="uts">
import type { SelectListItem } from '@/uni_modules/uview-pro-x';

const show = ref<boolean>(false);
const result = ref<string>('');

const list: SelectListItem[] = [
    {
        label: '山东省',
        value: 'sd',
        children: [
            {
                label: '青岛市',
                value: 'qd',
                children: [
                    { label: '崂山区', value: 'ls' },
                    { label: '市南区', value: 'sn' }
                ]
            },
            {
                label: '济南市',
                value: 'jn',
                children: [
                    { label: '历下区', value: 'lx' },
                    { label: '市中区', value: 'sz' }
                ]
            }
        ]
    },
    {
        label: '海南省',
        value: 'hn',
        children: [
            {
                label: '三亚市',
                value: 'sy',
                children: [
                    { label: '海棠区', value: 'ht' },
                    { label: '吉阳区', value: 'jy' }
                ]
            }
        ]
    }
];

function joinLabels(value: UTSJSONObject[]): string {
    if (value == null) return '';
    const labels: string[] = [];
    for (let i = 0; i < value.length; i++) {
        const label = value[i]['label'] as string;
        if (label != null && label !== '') {
            labels.push(label);
        }
    }
    return labels.join(' / ');
}

function onConfirm(value: UTSJSONObject[]): void {
    result.value = joinLabels(value);
}
</script>

<style scoped>
.result {
    margin-top: 10px;
    font-size: 13px;
    color: #909399;
}
</style>

API

Props

属性	说明	类型	默认值	版本
customStyle		UTSJSONObject	-	-
customClass		string	''	-
list	列数据，外部传入	SelectListItem[] | SelectListItem[][]	-	-
border	是否显示边框	boolean	true	-
modelValue	v-model 控制弹出与收起	boolean	false	-
cancelColor	取消按钮颜色	string	''	-
confirmColor	确认按钮颜色	string	''	-
zIndex	弹出 z-index	number | string	0	-
safeAreaInsetBottom	是否开启底部安全区适配（默认 true，由 ux-popup 在 mode=bottom 时加 padding-bottom）	boolean	true	-
maskCloseAble	是否允许点击遮罩关闭	boolean	true	-
defaultValue	默认选中的下标	number[]	-	-
preserveSelection	是否保留用户上次确认的选择	boolean	true	-
mode	模式，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动	SelectMode	'single-column'	-
valueName	自定义 value 属性名	string	'value'	-
labelName	自定义 label 属性名	string	'label'	-
childName	自定义多列联动模式的 children 属性名	string	'children'	-
title	顶部标题	string	''	-
cancelText	取消按钮文字	string	''	-
confirmText	确认按钮文字	string	''	-

Events

事件名	说明	回调参数	版本
confirm		value: UTSJSONObject[]	-
cancel		-	-
click		-	-

Slots

ux-select 无插槽。

注意事项

1. 必须用布尔 v-model 控制弹出与收起，list 数据全部由外部传入。
2. mode 取值：single-column（list 一维数组）、mutil-column（二维数组）、mutil-column-auto（树形，靠 children 联动）。
3. confirm 回调参数为选中项数组，每项形如 { value, label }（有 extra 时附带），数组长度与列数一致。
4. default-value 为各列默认选中下标；preserve-selection 为 true 时再次打开会沿用上次确认的下标，为 false 时优先取 default-value。
5. value-name / label-name / child-name 可自定义数据字段名（默认 value / label / children）。
6. border 属性当前未参与组件渲染（源码根节点未引用），如需边框请用 custom-class 自定义。
7. 底部安全区由内部 ux-popup 处理（safe-area-inset-bottom）；z-index 为 0 时回退到 $u.zIndex.popup。