uni-app 实现类似 element-ui tree 树形控件，带节点过滤功能

要在 uni-app 中实现类似 Element UI 的树形控件（Tree），并带节点过滤功能，你可以使用递归组件来构建树形结构，同时结合搜索输入框来实现节点过滤。以下是一个简单的代码示例：

1. 创建 TreeNode 组件

首先，创建一个递归组件 TreeNode.vue，用于渲染树节点。

<template>
  <view>
    <view @click="toggle" :style="{paddingLeft: depth * 20 + 'px'}">
      <text>{{ node.label }}</text>
    </view>
    <view v-if="isOpen && node.children && node.children.length" style="padding-left: depth * 20 + 'px'">
      <tree-node
        v-for="(child, index) in filteredChildren"
        :key="index"
        :node="child"
        :depth="depth + 1"
        :filter-text="filterText"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object,
    depth: Number,
    filterText: String
  },
  data() {
    return {
      isOpen: false
    };
  },
  computed: {
    filteredChildren() {
      if (!this.filterText) return this.node.children;
      return this.node.children.filter(child =>
        child.label.toLowerCase().includes(this.filterText.toLowerCase())
      );
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

2. 创建 Tree 组件

接下来，创建一个 Tree.vue 组件，用于包裹和管理 TreeNode 组件，并添加搜索输入框。

<template>
  <view>
    <input v-model="filterText" placeholder="搜索节点"/>
    <tree-node
      v-for="(node, index) in filteredData"
      :key="index"
      :node="node"
      :depth="0"
      :filter-text="filterText"
    />
  </view>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  components: { TreeNode },
  data() {
    return {
      filterText: '',
      treeData: [
        // 示例数据
        { label: '节点1', children: [{ label: '子节点1-1' }, { label: '子节点1-2' }] },
        { label: '节点2', children: [{ label: '子节点2-1' }] }
      ]
    };
  },
  computed: {
    filteredData() {
      if (!this.filterText) return this.treeData;
      return this.treeData.filter(node =>
        node.label.toLowerCase().includes(this.filterText.toLowerCase())
      );
    }
  }
};
</script>

3. 使用 Tree 组件

最后，在你的页面中使用 Tree.vue 组件。

<template>
  <view>
    <tree />
  </view>
</template>

<script>
import Tree from '@/components/Tree.vue';

export default {
  components: { Tree }
};
</script>

这段代码展示了如何在 uni-app 中实现一个带节点过滤功能的树形控件。你可以根据实际需求进一步定制和优化这些组件。