Vue中基于iView封装支持搜索选中的Tree组件

2024-01-31 09:41:53

轻松实现 Vue 中的树形搜索功能

在当今数据驱动的世界中，组织和浏览复杂的信息至关重要。树形结构因其有效地呈现层次数据而被广泛采用，尤其是在涉及分类和导航时。在 Vue 项目中，使用 iView 组件库可以轻松地将树形结构集成到应用程序中，并增强其可用性。

本文将深入探究如何基于 iView 封装一个支持搜索选中的 Tree 组件，提供清晰的实现步骤和示例代码。通过利用 Vue 的强大功能，开发者可以轻松地实现树形结构的搜索过滤功能，显著改善用户体验。

自定义 Tree 组件

为了在 Vue 中实现搜索功能，我们需要自定义 Tree 组件。这个组件将继承 iView 提供的 Tree 组件，并对其进行扩展，添加搜索功能。以下是自定义组件的代码：

import { Tree, Input } from 'iview';

export default {
  name: 'SearchTree',
  components: { Tree, Input },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    },
    emitPath: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchValue: '',
      filteredData: []
    };
  },
  computed: {
    filterTreeData() {
      if (!this.searchValue) {
        return this.data;
      }

      const result = [];
      const traverse = (data) => {
        data.forEach((item) => {
          if (item.label.indexOf(this.searchValue) > -1) {
            result.push(item);
          }
          if (item.children && item.children.length) {
            traverse(item.children);
          }
        });
      };
      traverse(this.data);
      return result;
    }
  },
  watch: {
    searchValue(val) {
      this.filteredData = this.filterTreeData;
    }
  },
  render() {
    return (
      <div>
        <Input v-model="searchValue" placeholder="请输入搜索" />
        <Tree
          :data="this.filteredData"
          :value="this.value"
          :emit-path="this.emitPath"
        />
      </div>
    );
  }
};

1. 组件结构

自定义组件继承了 iView 的 Tree 组件，并添加了一个搜索输入框和一个用来显示过滤结果的 Tree 组件。

2. 数据

组件使用 data() 函数来初始化 searchValue 和 filteredData 数据。searchValue 用于存储搜索关键字，filteredData 用于存储过滤后的树形数据。

3. computed

filterTreeData 计算属性负责过滤树形数据。它遍历原始数据，并根据搜索关键字筛选出包含匹配项的节点。

4. watch

watch 选项用于监视 searchValue 的变化。当搜索关键字发生变化时，它会触发 filterTreeData 重新计算，从而更新过滤后的数据。

搜索功能实现

借助 Vue 的响应式特性，搜索功能的实现变得轻而易举。当用户在搜索输入框中输入关键字时，searchValue 数据会自动更新。然后，filterTreeData 计算属性被触发，并根据新的搜索关键字重新计算过滤后的数据。过滤后的数据随后被显示在 Tree 组件中，仅包含与搜索关键字匹配的节点。

使用示例

以下示例展示了如何使用自定义的 SearchTree 组件：

<template>
  <div>
    <SearchTree :data="treeData" :value="treeValue" @on-change="handleChange" />
  </div>
</template>

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

export default {
  name: 'App',
  components: { SearchTree },
  data() {
    return {
      treeData: [
        {
          label: '节点1',
          children: [
            { label: '子节点1' },
            { label: '子节点2' }
          ]
        },
        {
          label: '节点2',
          children: [
            { label: '子节点3' },
            { label: '子节点4' }
          ]
        }
      ],
      treeValue: []
    };
  },
  methods: {
    handleChange(val) {
      this.treeValue = val;
    }
  }
};
</script>