SelectView 内嵌选择器

单选

template

<be-select-view mode="single" v-model="selectValue" :list="selectList" height="200px">
</be-select-view>

script

import { ref } from 'vue';

const selectValue = ref<number>();
const selectList = ref([
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3 }
]);

多选

template

<be-select-view mode="multiple" v-model="selectValue" :list="selectList" height="200px">
</be-select-view>

script

import { ref } from 'vue';

const selectValue = ref<number[]>([]);
const selectList = ref([
  [
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 },
    { label: '选项3', value: 3 }
  ],
  [
    { label: '选项4', value: 4 },
    { label: '选项5', value: 5 },
    { label: '选项6', value: 6 }
  ]
]);

级联选择

template

<be-select-view mode="cascade" v-model="selectValue" :list="selectList" height="200px">
</be-select-view>

script

import { ref } from 'vue';

const selectValue = ref<number[]>([]);
const selectList = ref([
  {
    label: '选项1',
    value: 100,
    children: [
      {
        label: '选项1-1',
        value: 110,
        children: [
          {
            label: '选项1-1-1',
            value: 111
          },
          {
            label: '选项1-1-2',
            value: 112
          }
        ]
      },
      {
        label: '选项1-2',
        value: 120,
        children: [
          {
            label: '选项1-2-1',
            value: 121
          },
          {
            label: '选项1-2-2',
            value: 122
          }
        ]
      }
    ]
  },
  {
    label: '选项2',
    value: 200,
    children: [
      {
        label: '选项2-1',
        value: 210,
        children: [
          {
            label: '选项2-1-1',
            value: 211
          }
        ]
      }
    ]
  }
]);

API

Props

属性名	说明	类型	默认值
modelValue(v-model)	当前选中值（数组）	string | number | Array<string | number>	undefined
list	列数据	见示例	-
mode	选择模式	single | multiple | cascade	single
valueName	自定义列数据的value字段名	string	value
labelName	自定义列数据的label字段名	string	label
childName	自定义列数据的children字段名	string	children
width	宽度	css width	100%
height	高度	css height	400rpx
layout	列布局方式。可选值row-reverse，水平从右到左排列	default | row-reverse	default

INFO

v-model值如果为空，在组件初始化时会为其赋一个默认值（第一个选项）

Props extend uni-app picker-view

属性名	说明	默认值
indicatorStyle	属性说明	height: 40px
indicatorClass	属性说明	-
maskStyle	属性说明	-
maskClass	属性说明	-

Events

事件名称	说明	回调参数
change	当滚动选择时触发，回调函数第一个参数为picker-view的value，第二个参数为第几列	(value: number[], index: number) => {}

Methods

方法名	说明	参数
clear	清空当前选中值	() => void