Tree Select

Tree select

Markup Schema Example

树形选择:

Select

JSON Schema Example

vue

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Form, FormItem, Submit, TreeSelect } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const form = createForm()

const schema = {
  type: 'object',
  properties: {
    treeSelect: {
      'type': 'string',
      'title': '树形选择',
      'enum': data,
      'x-decorator': 'FormItem',
      'x-component': 'TreeSelect',
    },
  },
}

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    TreeSelect,
  },
})

async function onSubmit(value: Record<string, any>) {
  console.log(value)
}
</script>

<template>
  <Form :form="form" label-align="left" :label-width="160">
    <SchemaField :schema="schema" />
    <Submit @submit="onSubmit">
      提交
    </Submit>
  </Form>
</template>

Template Example

树形选择:

Multiple selection and deselecting

Set multiple: true to enable multiple selection. Selected nodes are rendered as tags; click the close icon on a tag to deselect a single node, and use clearable: true to clear all selections at once. In multiple mode the form value is an array of node values.

多选树形选择:

{
  "treeSelect": [
    "1-1-1",
    "2-1-1"
  ]
}

API

See https://element-plus.org/en-US/component/tree-select.html

Get Instance

Used to access the ElTreeSelect instance. For exposed methods, see the Element Plus documentation. The node-filtering demo shows the usage pattern. This is mainly used to control tree expansion and selection.

const treeSelectRef: Ref<TreeSelectInstance> = fieldRef.value.invoke('getTreeSelectRef')

Slots

All slots from the original component are supported, and each slot additionally receives the field value in its slot scope for easier access.

Object values and property selection

Set optionAsValue: true to submit option objects. The optional optionValueKeys?: string[] strictly selects top-level properties. Omit it to return complete objects; an empty array returns an empty object, and missing properties are ignored. optionAsValue defaults to false.

Projection affects only the submitted value, never dataSource. Include the identity property (value, or the configured nodeKey / rowKey) in the allowlist. Labels are resolved from the complete data source, so the form value does not need a label.

const componentProps = {
  optionAsValue: true,
  optionValueKeys: ['value'],
}
// dataSource: [{ value: 1, label: 'One', extra: 'Business data' }]
// Form value: { value: 1 }

精简对象值:

Select

{}

Tree Select ​

Markup Schema Example ​

JSON Schema Example ​

Template Example ​

Multiple selection and deselecting ​

API ​

Get Instance ​

Slots ​

Object values and property selection ​