Silver Formily Vant1.0.1

Appearance

Mobile Preview Open
Open mobile preview

TreeSelect ​

TreeSelect 是基于 Vant 官方 TreeSelect 做的表单封装，交互形态与 Picker 一致：表单项里展示触发输入框，点击后在底部弹层中选择。

基础使用 ​

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

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

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

<template>
  <Form :form="form">
    <Field
      name="city"
      title="城市"
      :decorator="[FormItem, { isLink: true }]"
      :component="[TreeSelect, { height: 320, title: '选择城市' }]"
      :data-source="categoryItems"
    />

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

多选 ​

当字段值是数组时，会进入多选模式。

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { FormItem, TreeSelect } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'
import { categoryItems } from './shared'

const form = createForm({
  values: {
    cities: ['hangzhou', 'suzhou'],
  },
})
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="cities"
      title="常去城市"
      :decorator="[FormItem, { isLink: true }]"
      :component="[TreeSelect, { height: 320, max: 3, title: '选择常去城市' }]"
      :data-source="categoryItems"
    />
  </FormProvider>
</template>

只读与禁用 ​

触发区交互状态跟随 Field 的 disabled / readOnly / readPretty，不会透传给内部 Vant TreeSelect。

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { FormItem, TreeSelect } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'
import { categoryItems } from './shared'

const form = createForm({
  values: {
    disabledCity: 'nanjing',
    readonlyCity: 'guangzhou',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="disabledCity"
      title="禁用"
      disabled
      :decorator="[FormItem, { isLink: true }]"
      :component="[TreeSelect, { height: 260, title: '禁用态' }]"
      :data-source="categoryItems"
    />
    <Field
      name="readonlyCity"
      title="只读"
      read-only
      :decorator="[FormItem, { isLink: true }]"
      :component="[TreeSelect, { height: 260, title: '只读态' }]"
      :data-source="categoryItems"
    />
  </FormProvider>
</template>

阅读态 ​

阅读态会从 items.children 中按 id 查找并展示对应的 text。

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { FormItem, TreeSelect } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'
import { categoryItems } from './shared'

const form = createForm({
  readPretty: true,
  values: {
    city: 'shenzhen',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="city"
      title="城市"
      :decorator="[FormItem]"
      :component="[TreeSelect]"
      :data-source="categoryItems"
    />
  </FormProvider>
</template>

API ​

补充 Props ​

属性名类型描述默认值
modelValuenumber | string | Array当前选中项 id，数组值表示多选-
itemsTreeSelectItem[]分类数据，Formily 中可用 dataSource 传入[]
popupPropsTreeSelectPopupProps传给内部 Popup 的配置-
displayFormatterFunction自定义字段展示文案-

提示

当前封装暂不对外暴露 main-active-index 的双向绑定，弹层内左侧激活项由组件内部维护。需要感知左侧点击时，可先使用 click-nav 事件。

其余属性、事件、插槽可以直接参考官方文档Vant TreeSelect 官方文档。