VueDictionary

TreeSelect

Basic

View source
<template>
  <dict-tree-select v-model="value" :data="dictData"></dict-tree-select>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref("");
const dictData = [
  {
    label: "fruits",
    value: "fruits",
    children: [
      { label: "apple", value: "1" },
      { label: "banana", value: "2" },
      { label: "cherry", value: "3" }
    ]
  },
  {
    label: "vegetables",
    value: "vegetables",
    children: [
      { label: "avocado", value: "4" },
      { label: "bean", value: "5" },
      { label: "carrot", value: "6" }
    ]
  }
];
</script>

Disabled

View source
<template>
  <dict-tree-select v-model="value" :data="dictData"></dict-tree-select>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref([]);
const dictData = [
  {
    label: "fruits",
    value: "fruits",
    children: [
      { label: "apple", value: "1" },
      { label: "banana", value: "2" },
      { label: "cherry", value: "3" }
    ]
  },
  {
    label: "vegetables",
    value: "vegetables",
    children: [
      { label: "avocado", value: "4" },
      { label: "bean", value: "5" },
      { label: "carrot", value: "6" }
    ]
  }
];
</script>

Multiple

View source
<template>
  <dict-tree-select v-model="value" :data="dictData" multiple show-checkbox :check-strictly="true"></dict-tree-select>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref([]);
const dictData = [
  {
    label: "fruits",
    value: "fruits",
    children: [
      { label: "apple", value: "1" },
      { label: "banana", value: "2" },
      { label: "cherry", value: "3" }
    ]
  },
  {
    label: "vegetables",
    value: "vegetables",
    children: [
      { label: "avocado", value: "4" },
      { label: "bean", value: "5" },
      { label: "carrot", value: "6" }
    ]
  }
];
</script>

Filterable

View source
<template>
  <dict-tree-select v-model="value" :data="dictData" filterable></dict-tree-select>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref([]);
const dictData = [
  {
    label: "fruits",
    value: "fruits",
    children: [
      { label: "apple", value: "1" },
      { label: "banana", value: "2" },
      { label: "cherry", value: "3" }
    ]
  },
  {
    label: "vegetables",
    value: "vegetables",
    children: [
      { label: "avocado", value: "4" },
      { label: "bean", value: "5" },
      { label: "carrot", value: "6" }
    ]
  }
];
</script>

Props

支持 el-tree-select 所有参数和事件(仅支持 element-plus. element-ui 没有 tree-select 组件)

参数说明类型可选值默认值
v-model绑定值string / number / array
data字典数据array--