树选择 Tree Select

#基础用法

tree-select/basic.vue

<script setup lang="ts">
import { TreeSelect, type TreeSelectNode } from "@bysages/vue";
import { ref } from "vue";

const data: TreeSelectNode[] = [
  {
    label: "Ink",
    value: "ink",
    children: [
      { label: "Pine soot", value: "pine" },
      { label: "Lampblack", value: "lamp" },
    ],
  },
  {
    label: "Pigment",
    value: "pigment",
    children: [
      { label: "Stone green", value: "stone-green" },
      { label: "Azurite", value: "azurite", disabled: true },
    ],
  },
];

const value = ref();
</script>

<template>
  <TreeSelect v-model="value" :data="data" placeholder="Choose a medium…" class="w-full" />
</template>

tree-select/filterable Vue React

tree-select/filterable.vue

<script setup lang="ts">
import { TreeSelect, type TreeSelectNode } from "@bysages/vue";
import { ref } from "vue";

const data: TreeSelectNode[] = [
  {
    label: "Ink",
    value: "ink",
    children: [
      { label: "Pine soot", value: "pine" },
      { label: "Lampblack", value: "lamp" },
    ],
  },
  {
    label: "Pigment",
    value: "pigment",
    children: [
      { label: "Stone green", value: "stone-green" },
      { label: "Azurite", value: "azurite" },
    ],
  },
];

const value = ref();
</script>

<template>
  <TreeSelect
    v-model="value"
    :data="data"
    filterable
    placeholder="Choose a medium…"
    class="w-full"
  />
</template>

#属性

#TreeSelect

TreeSelect：树形选择器。控件外观像输入框，下方浮层展示层级，点击叶节点即完成选择。仅支持单选：选中 label 显示在控件上，值保存在 modelValue。filterable 在浮层顶部加入过滤输入框；匹配项保留祖先节点，相关分支会展开。

属性	类型	默认值	描述
`modelValue`	`String`	`undefined`	—
`data`	`Array as PropType<TreeSelectNode[]>`		—
`placeholder`	`String`	`"Select…"`	—
`filterable`	`Boolean`	`false`	—
`disabled`	`Boolean`	`false`	—
`invalid`	`Boolean`	`false`	—
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	树选择框的尺寸档位，触发器高度和行规格随之变化