更新记录

1.0.1（2025-11-21） 下载此版本

树形选择器增强版，支持多选、单选、全选UI、支持数据回显、二级分类

平台兼容性

uni-app(4.76)

Kuikui Tree 组件使用说明

概述

• 两级分类树选择器组件，支持单选/多选、数据回显、遮罩弹层。
• 通过 ref 打开/关闭组件，顶部栏可“取消/确定”。
• 事件回调携带所选项的原始数据与其父级链路，便于业务落地。

引入与使用

• 将组件文件放置于 pages/components/kuikui-tree.vue，并在页面中注册与引用。

  
  <template>
  <view>
  <button @tap="openTree">选择分类</button>
  
  <!-- 组件 -->
  <kuikui-tree
    ref="tree"
    :range="range"
    :multiple="true"
    title="选择分类"
    :confirmColor="'#07bb07'"
    :cancelColor="'#757575'"
    :titleColor="'#757575'"
    @confirm="onConfirm"
    @cancel="onCancel"
  />
  </view>
  </template>

**数据结构**
- 默认字段名：`id` 为节点唯一标识，`label` 为显示文案，`children` 为子节点数组，`checked` 为是否预选。
- 可通过 `idKey`、`rangeKey` 自定义字段名。
```js
[
  {
    id: 1,
    label: '水果',
    checked: false,
    children: [
      { id: 11, label: '苹果' },
      { id: 12, label: '香蕉', checked: true }
    ]
  }
]

属性（Props）

• range: Array 数据源（层级结构），默认 []。
• idKey: String 节点唯一键名，默认 'id'。
• rangeKey: String 节点显示键名，默认 'label'。
• title: String 弹层标题，默认 ''。
• multiple: Boolean 是否多选，默认 false（单选）。
• selectParent: Boolean 是否允许选择父级，默认 false（当前实现未使用）。
• confirmColor: String “确定”按钮颜色，默认 '#07bb07'。
• cancelColor: String “取消”按钮颜色，默认 '#757575'。
• titleColor: String 标题颜色，默认 '#757575'。

方法

• _show() 打开弹层。
• _hide() 关闭弹层。
• 通过组件 ref 调用：this.$refs.tree._show()、this.$refs.tree._hide()。

事件

• confirm 确认选择后触发，参数为数组，每项为“源数据 + 父链路”（来源 pages/components/kuikui-tree.vue:145）：

  [
  {
  id: 12,
  label: '香蕉',
  parents: [
    { id: 1, label: '水果' }
  ]
  }
  ]

• cancel 取消选择时触发，参数为空字符串（触发位置 pages/components/kuikui-tree.vue:140）。

交互说明

• 左侧为父级列表（rank=0），右侧显示当前父级的子项。
• 单选：点击子项会取消其他项的选中，仅保留当前项。
• 多选：点击子项仅切换该项选中状态，不影响其他项。
• 预选回显：在数据源节点上设置 checked: true 可初始选中；组件会将对应父级置为激活。
• 选择子项时，左侧会自动定位到其父级（逻辑：pages/components/kuikui-tree.vue:199-219）。

样式定制

• 顶部栏颜色可通过 confirmColor、cancelColor、titleColor 定制。
• 组件内部使用 rpx 与 scss，适配小程序/uni-app 场景。

典型场景示例

• 单选（默认）：

  <kuikui-tree ref="tree" :range="range" title="选择分类" @confirm="onConfirm" />

• 多选：

  <kuikui-tree ref="tree" :range="range" :multiple="true" title="批量选择" @confirm="onConfirm" />

• 自定义字段名：

  <kuikui-tree
  ref="tree"
  :range="customRange"
  idKey="code"
  rangeKey="name"
  title="自定义字段演示"
  @confirm="onConfirm"
  />

  customRange: [
  { code: 'A', name: '分组A', children: [{ code: 'A1', name: '子项A1' }] }
  ]

更新与监听

• 当外部 range 变化时，组件自动重新渲染树结构（监听位置 pages/components/kuikui-tree.vue:126-130）。
• 初始化树与构建内部 treeList 的逻辑在 _renderTreeList（pages/components/kuikui-tree.vue:174-195）。

注意事项

• 请确保每个父级有唯一 idKey，子项 parentId 链路由组件内部生成。
• 当前版本未对 selectParent 做选择父级的显式交互处理，如需支持可在后续扩展。