vue实现分类列表
Vue 实现分类列表的方法
数据结构设计
使用数组存储分类数据，每个分类对象包含 id、name 等属性，子分类通过 children 字段嵌套。例如：
categories: [
{
id: 1,
name: "电子产品",
children: [
{ id: 101, name: "手机" },
{ id: 102, name: "笔记本电脑" }
]
}
]模板渲染
通过 v-for 递归渲染多级分类，结合 v-if 控制子分类的显示状态：
<ul>
<li v-for="category in categories" :key="category.id">
{{ category.name }}
<ul v-if="category.children">
<li v-for="child in category.children" :key="child.id">
{{ child.name }}
</li>
</ul>
</li>
</ul>动态交互
添加展开/折叠功能，通过 data 中的 expandedIds 数组记录展开状态：
data() {
return {
expandedIds: []
}
},
methods: {
toggleExpand(id) {
const index = this.expandedIds.indexOf(id);
index === -1
? this.expandedIds.push(id)
: this.expandedIds.splice(index, 1);
}
}样式优化
使用 CSS 增强视觉效果，如缩进表示层级关系：
ul {
list-style-type: none;
padding-left: 20px;
}
li {
cursor: pointer;
margin: 5px 0;
}组件化拆分
将分类项拆分为独立组件 CategoryItem，通过 props 接收数据：
// CategoryItem.vue
props: ['category'],
template: `
<li @click.stop="toggleExpand(category.id)">
{{ category.name }}
<ul v-if="isExpanded && category.children">
<category-item
v-for="child in category.children"
:key="child.id"
:category="child"
/>
</ul>
</li>
`数据加载
通过 API 异步获取分类数据，使用 axios 或 fetch：
async created() {
try {
const res = await axios.get('/api/categories');
this.categories = res.data;
} catch (error) {
console.error("加载分类失败", error);
}
}状态管理
对于大型应用，建议使用 Vuex 集中管理分类状态：
// store.js
state: {
categories: []
},
mutations: {
SET_CATEGORIES(state, data) {
state.categories = data;
}
}
