更新记录

1.4.4（2026-05-14） 下载此版本

调整图片

1.4.2（2026-05-14） 下载此版本

• 节点右侧可选小图：treeProps.rightImage 映射数据字段，有非空路径则显示，否则不占位；right-image-size 控制尺寸；right-image-click 事件

平台兼容性

uni-app(4.01)

uni-app x(4.01)

lv-tree

Vue2 uni-app 通用树形组件：左侧展开/折叠仅图片；支持复选框（含父子联动），可发布至 DCloud 插件市场。

目录说明

uni_modules/lv-tree/
├── static/
│   └── lv-tree-chevron.png   # 默认展开图标（由组件内 require 引用，勿改文件名或需同步改代码）
├── components/lv-tree/
│   ├── lv-tree.vue          根组件（请使用此组件）
│   └── lv-tree-node.vue     内部节点（无需单独引用）
├── package.json
├── readme.md
└── changelog.md

安装

将 uni_modules/lv-tree 目录拷贝到目标工程的 uni_modules 下，或在 HBuilderX 中通过插件市场导入。

用法

<template>
  <view class="page">
    <lv-tree
      ref="tree"
      :data="treeData"
      :tree-props="treeProps"
      node-key="id"
      :show-checkbox="true"
      :default-expand-all="true"
      @node-click="onNodeClick"
      @leaf-click="onLeafClick"
      @check-change="onCheckChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      treeProps: {
        children: 'children',
        label: 'name',
        disabled: 'disabled',
        checkable: 'checkable',
        rightImage: 'rightImage'
      },
      treeData: [
        {
          id: '1',
          name: '一级',
          children: [
            { id: '1-1', name: '二级 A' },
            { id: '1-2', name: '二级 B' }
          ]
        }
      ]
    }
  },
  methods: {
    onNodeClick({ node, key, expanded }) {
      console.log('click', key, expanded)
    },
    onLeafClick({ node, key }) {
      console.log('叶子', key, node)
    },
    onCheckChange({ checkedNodes, checkedKeys }) {
      console.log('keys', checkedKeys, 'nodes', checkedNodes)
    },
    readChecked() {
      const nodes = this.$refs.tree.getCheckedNodes()
      console.log(nodes)
    }
  }
}
</script>

Props

展开/折叠（仅 <image>，无文本字符）

<!-- 内置 chevron：收起向右、展开向下 -->
<lv-tree />

<!-- 双图 -->
<lv-tree
  expand-icon-src="/static/tree-right.png"
  collapse-icon-src="/static/tree-down.png"
  :expand-icon-size="40"
/>

<!-- 自定义单图（右箭头）：展开时旋转 90° -->
<lv-tree expand-icon-src="/static/arrow-right.png" />

<!-- 图标占满外框 / 固定 rpx -->
<lv-tree :expand-icon-image-percent="100" />
<lv-tree :expand-icon-image-size="32" :expand-icon-size="48" />

treeProps 默认值

{ children: 'children', label: 'label', disabled: 'disabled', checkable: 'checkable', rightImage: 'rightImage' }

节点上若 checkable === false（字段名可通过 treeProps.checkable 修改），则该行不显示勾选框，且该节点不参与勾选与 getCheckedKeys；父级勾选时仅作用于可勾选的后代。

右侧小图：在 treeProps 中配置 rightImage 为节点对象上的字段名（默认 'rightImage'）。该字段为非空字符串（图片路径）时在行末展示；未配置、字段不存在或为空字符串时不展示（不占位）。可用 right-image-size（rpx）控制尺寸。点击右侧图会触发 right-image-click。

Events

事件参数补充

• check-change：checkedNodes / halfCheckedNodes 为与 checkedKeys / halfCheckedKeys 一一对应的原始节点对象（树里 data 中的引用）。
• node-click / leaf-click：在 show-checkbox 为 true 时额外携带 checkedKeys、checkedNodes、halfCheckedKeys、halfCheckedNodes（点击瞬间的快照）。

方法（ref）

注意事项

1. nodeKey 对应字段在整棵树中应唯一，否则勾选与展开状态可能异常。
2. 若节点无 children 或 children 为空数组，视为叶子节点。
3. 左侧展开/折叠仅使用图片（<image>），已移除 expand-icon-text、collapse-icon-text、expand-icon-class、expand-icon-color、expand-icon-font-size 等文本相关配置。
4. 本插件为纯 Vue 组件，未使用 UTS；若仅需 App 原生能力，可自行扩展 utssdk 目录（非必填）。

License

MIT