更新记录

0.0.6（2025-08-15）

• feat: 支持uniappx 试用

0.0.5（2025-04-21）

• feat: 兼容uniappx 鸿蒙next

0.0.3（2025-04-11）

• feat: 更新样式

平台兼容性

云端兼容性

uni-app(4.55)

uni-app x(4.76)

lime-tree 树形组件

一个功能丰富的树形组件，用于展示多层次的结构列表。支持节点选择、级联选择、异步加载、搜索过滤等多种配置，可用于组织架构、文件目录、菜单导航等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的树形结构展示需求。

插件依赖：lime-shared、lime-style、lime-checkbox、lime-loading

文档链接

📚 组件详细文档请访问以下站点：

• 树形组件文档 - 站点1
• 树形组件文档 - 站点2
• 树形组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-tree
2. 导入后可能需要重新编译项目
3. 在页面中使用l-tree组件
4. 本插件在uniapp只支持源码（无法试用和普通授权）

代码演示

基础用法

最简单的树形组件用法，通过data设置树的节点数据。

<l-tree 
  :data="data" 
  :default-expanded-keys="defaultExpandedKeys" 
  expand-on-click 
  checkable 
/>

// setup 语法
const data = ref([
  {
    label: '道生一',
    key: '1',
    children: [
      {
        label: '一生二',
        key: '1-1',
        children: [
          {
            label: '二生三',
            key: '1-1-1',
            children: [
              { label: '三生万物', key: '1-1-1-1' }
            ]
          }
        ]
      }
    ]
  }
])

const defaultExpandedKeys = ref(['1', '1-1'])

自定义字段名

通过key-field、label-field和children-field自定义节点数据的字段名。

<l-tree 
  :data="customData" 
  :default-expanded-keys="defaultExpandedKeys" 
  key-field="id"
  label-field="name" 
  children-field="items" 
  selectable 
/>

// setup 语法
const customData = ref([
  {
    name: '道生一',
    id: '1',
    items: [
      {
        name: '一生二',
        id: '1-1',
        items: [
          {
            name: '二生三',
            id: '1-1-1',
            items: [
              { name: '三生万物', id: '1-1-1-1' }
            ]
          }
        ]
      }
    ]
  }
])

const defaultExpandedKeys = ref(['1', '1-1'])

级联选择

设置cascade属性开启级联选择，选中父节点时会自动选中所有子节点。

<l-tree 
  :data="data" 
  cascade 
  :default-expanded-keys="defaultExpandedKeys"
  :default-checked-keys="defaultCheckedKeys" 
  @checked="updateCheckedKeys" 
  checkable 
/>

// setup 语法
// 树形数据结构
const data = ref([
  {
    label: '道生一',
    key: '1',
    children: [
      {
        label: '一生二',
        key: '1-1',
        children: [
          {
            label: '二生三',
            key: '1-1-1',
            children: [
              { label: '三生万物', key: '1-1-1-1' }
            ]
          }
        ]
      }
    ]
  }
])

const defaultExpandedKeys = ref(['1', '1-1'])
const defaultCheckedKeys = ref(['1-1-1'])

const updateCheckedKeys = (keys: any[]) => {
  console.log('选中的节点：', keys)
}

搜索过滤

通过pattern属性设置搜索关键词，可以过滤树节点。showIrrelevantNodes可以设置只显搜索节点

<input 
  type="text" 
  placeholder="输入节点名称"
  v-model="pattern" 
/>

<view style="flex-direction: row; padding: 10px; align-items: center;">
  <switch :checked="showIrrelevantNodes" @change="switchChange"/>
  <text>{{ showIrrelevantNodes ? '显示所有节点' : '隐藏搜索无关的节点' }}</text>
</view>

<l-tree 
  :data="data" 
  expand-on-click 
  :pattern="pattern"
  :show-irrelevant-nodes="showIrrelevantNodes"
/>

// setup 语法
const pattern = ref('')
const showIrrelevantNodes = ref(false)

// 树形数据
const data = ref([
  {
    label: '0',
    key: '0',
    children: [
      {
        label: '0-0',
        key: '0-0',
        children: [
          { label: '0-0-0', key: '0-0-0' },
          { label: '0-0-1', key: '0-0-1' }
        ]
      },
      {
        label: '0-1',
        key: '0-1',
        children: [
          { label: '0-1-0', key: '0-1-0' },
          { label: '0-1-1', key: '0-1-1' }
        ]
      }
    ]
  }
])

const switchChange = (event: UniSwitchChangeEvent) => {
  showIrrelevantNodes.value = event.detail.value
}

异步加载

使用 load-node 回调来加载数据。异步加载时，所有 isLeaf 为 false 并且 children 不为数组的节点会被视为未加载的节点。

<l-tree 
  :data="asyncData" 
  :load-node="handleLoad"
  :expanded-keys="expandedKeys"
  @expanded="handleExpandedKeysChange" 
  checkable 
/>

// setup 语法
const asyncData = ref([
  {
    label: '道生一',
    key: '1',
    isLeaf: false
  },
  {
    label: '一生二',
    key: '2',
    isLeaf: false
  }
])

const expandedKeys = ref([])

const handleLoad = (node: UTSJSONObject): Promise<boolean> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 模拟异步加载数据
      node.children = [
        {
          label: node.label === '道生一' ? '一生二' : '二生三',
          key: `${node.key}-1`,
          isLeaf: false
        }
      ]
      resolve(true)
    }, 1000)
  })
}

const handleExpandedKeysChange = (keys: string[]) => {
  expandedKeys.value = keys
}

自定义节点内容

通过插槽自定义节点的展开/收缩图标和内容。

<l-tree 
  :data="data"  
  checkbox-placement="right"
  expand-on-click 
  center
  checked-color="red"
  @click="onClick"
  checkable 
>
  <template #switcher="{expanded}">
    <text v-show="expanded">🤔</text>
    <text v-show="!expanded">🐱</text>
  </template>
  <template #content="{node}">
    <view style="flex-direction: row; align-items: center;">
      <image style="width: 30px; height: 30px;" src="/static/logo.png"></image>
      <text style="padding: 10px;">{{node.label}}公司</text>
    </view>
  </template>
</l-tree>

// setup 语法
function repeat(count : number, value ?: string|number) : string|number[] {
    const result : string|number[] = [];
    for (let i = 0; i < count; i++) {
        result.push(value ?? '');
    }
    return result;
}
function createLabel(level : number) : string {
    if (level == 4)
        return '道生一'
    if (level == 3)
        return '一生二'
    if (level == 2)
        return '二生三'
    if (level == 1)
        return '三生万物'
    return ''
}

function createData(level = 4, baseKey : string = '') : UTSJSONObject[] | null {
    if (level == 0) return null
    return repeat(6 - level, null).map((_, index) : UTSJSONObject => {
        const key = `${baseKey}${level}${index}`
        return {
            label: createLabel(level),
            key,
            children: createData(level - 1, key)
        }
    })
}

const data = ref(createData())

const onClick = (node: UTSJSONObject, siblings: UTSJSONObject[]) => {
    // 获取当前节点所在兄弟节点的下标，可以做增删等操作
    const index = siblings.findIndex((item) => item['key'] == node['key'])
    console.log('index', index)
    // 删除
    // siblings.splice(0, 1)

}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-tree/components/lime-tree -->
<lime-tree />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助