Tree Select

树形选择器

Markup Schema 案例

树形选择:

请选择

JSON Schema 案例

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 案例

树形选择:

多选与取消选择

设置 multiple: true 开启多选，选中项以标签形式展示；点击标签上的关闭图标可取消单个选中项，配合 clearable: true 后还可以一键清空全部选中。多选时表单值为节点 value 组成的数组。

多选树形选择:

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

API

参考 https://cn.element-plus.org/zh-CN/component/tree-select.html

获取实例

用于获取ElTreeSelect实例,具体暴露的方法请参考element-plus文档。使用方式请参考节点过滤的demo。主要用来操作Tree的展开与选中。

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

插槽

支持原有组件所有插槽，所有插槽在原有基础上额外添加了 field 作用域插槽的值方便做访问。

对象值与属性筛选

设置 optionAsValue: true 可将选项对象作为表单值；optionValueKeys?: string[] 仅保留指定的顶层属性。未配置时返回完整对象，空数组返回空对象，缺失属性忽略。默认 optionAsValue 为 false。

筛选只作用于表单输出，不修改 dataSource。请在白名单中保留选项标识（如 value、nodeKey 或 rowKey 对应属性），回显按标识从完整数据源读取标签。仅提供标识而不保存 label 也可以正常回显。

const componentProps = {
  optionAsValue: true,
  optionValueKeys: ['value'],
}
// dataSource: [{ value: 1, label: '选项一', extra: '业务属性' }]
// 表单值: { value: 1 }

精简对象值:

请选择

{}

Tree Select ​

Markup Schema 案例 ​

JSON Schema 案例 ​

Template 案例 ​

多选与取消选择 ​

API ​

获取实例 ​

插槽 ​

对象值与属性筛选 ​