vant实现商品分类 左右联动

在Vant UI框架中，实现商品分类的左右联动效果通常会使用`van-collapse`组件配合`van-list`。步骤如下：

1. **引入组件**：首先，在项目中安装并引入需要的Vant组件，例如：

npm install vant vant-component vant-cascade

2. **添加布局**：在HTML结构上，创建两个`van-collapse`元素，一个作为父级分类，另一个作为子级展开后的列表：

<template>
  <div>
    <van-collapse v-model="activeKey">
      <!-- 父级分类 -->
      <van-collapse-item :key="category.parentId" :title="category.title" @change="handleCategoryChange">
        <!-- 子级列表将动态加载 -->
      </van-collapse-item>
    </van-collapse>

    <!-- 展开后的子级分类列表 -->
    <van-collapse v-model="expandedKey" class="sub-categories">
      <van-list :items="subCategories" />
    </van-collapse>
  </div>
</template>

3. **数据管理**：维护一个包含商品分类的数据结构，比如`category`和`subCategories`数组。当用户选择父级分类时，筛选出对应的子级分类，更新`expandedKey`：

data() {
  return {
    activeKey: '初始默认值',
    categories: ... // 商品分类数据,
    subCategories: [], // 初始化为空
  };
},
methods: {
  handleCategoryChange(key) {
    this.subCategories = this.categories.find((cat) => cat.parentId === key).children;
    this.expandedKey = key;
  }
}

4. **样式调整**：为了实现联动效果，可以给子级分类列表添加一些动画，例如淡入效果。