vue漏斗筛选怎么实现

Vue 漏斗筛选功能通常通过数据驱动的方式结合计算属性和数组操作来实现。以下是一个简单的步骤：

1. **数据结构**：首先，你需要一个包含所有选项的数据源，比如一个数组，每个元素代表一个层级的选项。

data() {
  return {
    options: [
      { name: '全部', children: [] },
      { name: '分类1', children: [{ name: '子级1' }, { name: '子级2' }] },
      { name: '分类2', children: [{ name: '子级A' }, { name: '子级B' }] }
    ]
  };
}

2. **模板**：在 Vue 的模板中，你可以创建一个树形结构展示这些选项，并添加一个筛选按钮或输入框。

<template>
  <div v-for="option in filteredOptions">
    <!-- 显示节点信息 -->
    <span>{{ option.name }}</span>
    <!-- 子级展开或折叠 -->
    <ul v-if="option.children.length" :visible="option.show">
      <li v-for="child in option.children">{{ child.name }}</li>
    </ul>
  </div>
</template>

3. **计算属性**：创建一个名为 `filteredOptions` 的计算属性，用于过滤出用户选择的层级。

computed: {
  filteredOptions() {
    const selectedLevel = this.selectedLevel || '';
    return this.options.filter(option => {
      // 如果选中的级别为空或者等于当前选项的名称，显示此选项及其子项
      return option.name === selectedLevel || !selectedLevel;
    }).map(option => ({
      ...option,
      show: option.name === selectedLevel,
      children: option.children.filter(child => child.name === selectedLevel)
    }));
  },
  selectedLevel: {
    // 用户选择的层级，可以绑定到筛选控件上
    get() {
      return this.$store.state.filterLevel;
    },
    set(level) {
      this.$store.commit('setFilterLevel', level);
    }
  }
},

4. **状态管理**：如果应用了 Vuex，可以在 store 中存储筛选状态，并通过 commit 更新。

5. **筛选触发**：当用户改变筛选条件时（如点击筛选按钮或输入新的筛选值），更新 `selectedLevel`，这会自动触发 `filteredOptions` 计算属性的重新计算。