PickerPanel

为了统一封装风格而独立的组件，大部分情况下应该配合 PickerGroup 使用，独立的弹出式封装请参考 Picker。

提示

PickerPanel 不包含触发输入框和 Popup；滚轮变化只维护临时选择，点击确认后才会写回字段值。
Field 上的 dataSource 会自动映射到 columns。

基础使用

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, PickerPanel, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { cityOptions } from '../picker/shared'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    city: 'sz',
  },
})

async function handleSubmit(values: typeof form.values) {
  await showDemoResult(values)
}
</script>

<template>
  <Form :form="form">
    <Field
      name="city"
      :component="[PickerPanel]"
      :data-source="cityOptions"
    />

    <FormButtonGroup>
      <Submit @submit="handleSubmit">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

API

使用约定

单列字段值是 string | number | null，多列 / 级联字段值是 Array<string | number> | null
默认选项结构使用 { label, value, children }，内部会自动映射成 Vant Picker 所需的 text
默认显示工具栏；滚轮变化不会立即写回，点击确认后才会触发 update:modelValue
readonly / disabled 会让内部滚轮进入只读态

兼容说明：text 仍会被当成 label 处理，但不再兼容 name。

如需对接自定义字段名，可通过 PickerFieldNames 把后端字段映射到“文案字段 / 值字段 / 子节点字段”。

补充 Props

属性名	类型	描述	默认值
`modelValue`	`string \| number \| Array<string \| number> \| null`	当前字段值	`-`
`columns`	`PickerColumn \| PickerColumn[]`	选项列，通常由 `dataSource` 提供	`[]`
`columnsFieldNames`	`PickerFieldNames`	自定义字段名映射	官方默认值
`readonly`	`boolean`	只读态	`false`
`disabled`	`boolean`	禁用态	`false`
`showToolbar`	`boolean`	是否显示顶部工具栏	`true`

官方 Picker Props

除上述补充能力外，Picker 选项结构、滚轮交互和已透传的官方属性 / 插槽可参考 Vant Picker 官方文档。

Events

事件名	描述	回调参数
`update:modelValue`	点击确认后同步字段值	`Function`
`confirm`	点击确认后触发	`Function`
`cancel`	点击取消后触发	`-`

PickerPanel ​

基础使用 ​

API ​

使用约定 ​

补充 Props ​

官方 Picker Props ​

Events ​

PickerPanel

基础使用

API

使用约定

补充 Props

官方 Picker Props

Events