Skip to content

SunlightThree 树形选择器

SunlightThree 是一个基于 Element Plus Tree 组件增强的树形选择器组件,提供了更丰富的配置选项和更好的用户体验。

功能特性

  • ✅ 支持单选和多选模式
  • ✅ 支持关键字过滤
  • ✅ 支持展开/折叠全部节点
  • ✅ 支持异步加载
  • ✅ 支持自定义节点内容
  • ✅ 支持自定义样式

基本用法

vue
<template>
  <SunlightThree 
    :data="treeData"
    title="树形选择器"
    :defaultValue="selectedValue"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { SunlightThree } from 'sunlight-ui'

const treeData = ref([
  {
    id: '1',
    label: '一级 1',
    children: [
      { id: '1-1', label: '二级 1-1' },
      { id: '1-2', label: '二级 1-2' }
    ]
  }
])

const selectedValue = ref('1-1')

const handleChange = (value) => {
  console.log('选中值:', value)
}
</script>