uniapp树状点击效果

在 UniApp 中实现树状点击效果，你可以使用组件的嵌套和条件渲染来实现。以下是一个简单的示例：

1. 首先，在你的页面中定义一个数据变量，用于控制树状结构的展开和收起状态：

data() {
  return {
    treeData: [
      {
        name: '节点1',
        children: [
          {
            name: '子节点1-1',
            children: []
          },
          {
            name: '子节点1-2',
            children: []
          }
        ]
      },
      {
        name: '节点2',
        children: []
      }
    ]
  }
}

2. 创建一个递归组件，用于渲染树状结构：

<template>
  <view>
    <block v-for="(node, index) in treeData" :key="index">
      <view @click="toggleNode(node)">
        {{ node.name }}
        <text v-if="node.children.length > 0">{{ node.open ? '-' : '+' }}</text>
      </view>
      <tree-node v-if="node.open && node.children.length > 0" :treeData="node.children"></tree-node>
    </block>
  </view>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    toggleNode(node) {
      node.open = !node.open;
    }
  }
}
</script>

3. 在你的页面中使用递归组件来展示树状结构：

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

通过点击节点，你可以展开或收起它的子节点。当子节点存在时，点击节点右侧会显示"+"或"-"符号，表示当前节点的展开或收起状态。

这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望对你有帮助！