当前位置：首页 > uni-app

uniapp 树形框

2026-02-05 23:11:46uni-app

uniapp 树形框实现方法

在 uniapp 中实现树形结构展示，可以通过以下几种方式：

使用 uni-list 和递归组件

创建一个递归组件来展示树形数据，结合 uni-list 进行样式控制：

<template>
  <view>
    <tree-node :node="treeData"></tree-node>
  </view>
</template>

<script>
export default {
  components: {
    TreeNode: {
      props: ['node'],
      template: `
        <view>
          <uni-list-item :title="node.label" @click="toggle">
            <template v-slot:footer>
              <uni-icons :type="node.expanded ? 'minus' : 'plus'"></uni-icons>
            </template>
          </uni-list-item>
          <view v-show="node.expanded" style="padding-left: 20px;">
            <tree-node 
              v-for="child in node.children" 
              :key="child.id" 
              :node="child">
            </tree-node>
          </view>
        </view>
      `,
      methods: {
        toggle() {
          this.node.expanded = !this.node.expanded
        }
      }
    }
  },
  data() {
    return {
      treeData: {
        id: 1,
        label: '根节点',
        expanded: true,
        children: [
          {
            id: 2,
            label: '子节点1',
            children: []
          },
          {
            id: 3,
            label: '子节点2',
            expanded: false,
            children: [
              {
                id: 4,
                label: '子子节点1',
                children: []
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

使用第三方组件 uView UI 的 tree 组件

uView UI 提供了现成的 tree 组件，安装后可直接使用：

<template>
  <view>
    <u-tree 
      :list="treeList" 
      :props="props"
      @node-click="nodeClick"
    ></u-tree>
  </view>
</template>

<script>
export default {
  data() {
    return {
      treeList: [
        {
          name: '根节点',
          id: 1,
          children: [
            {
              name: '子节点1',
              id: 2
            },
            {
              name: '子节点2',
              id: 3,
              children: [
                {
                  name: '子子节点1',
                  id: 4
                }
              ]
            }
          ]
        }
      ],
      props: {
        label: 'name',
        children: 'children'
      }
    }
  },
  methods: {
    nodeClick(node) {
      console.log('点击节点:', node)
    }
  }
}
</script>

使用插件市场组件

在 uni-app 插件市场搜索"树形组件"，可以找到多种现成解决方案：

安装插件市场中的树形组件
按照插件文档引入组件
配置数据源和必要参数
自定义样式和事件处理

自定义实现方案

对于需要高度自定义的场景，可以完全自己实现：

<template>
  <view>
    <view 
      v-for="item in treeData" 
      :key="item.id"
      :style="{paddingLeft: item.level * 15 + 'px'}"
    >
      <view @click="toggleExpand(item)">
        <text>{{item.expanded ? '▼' : '▶'}}</text>
        <text>{{item.label}}</text>
      </view>
      <tree-view 
        v-if="item.expanded && item.children" 
        :treeData="item.children"
      ></tree-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TreeView',
  props: {
    treeData: Array
  },
  methods: {
    toggleExpand(item) {
      item.expanded = !item.expanded
    }
  }
}
</script>