vue组件代码
<template>
<div>
<el-select v-model="selectedCategory" placeholder="请选择分类" @change="handleCategoryChange">
<el-option v-for="category in flattenCategories" :key="category.id" :label="getCategoryLabel(category)" :value="category.id"></el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'CategorySelect',
props: {
value: {
type: [String, Number],
default: ''
},
categories: {
type: Array,
default: () => []
}
},
data() {
return {
selectedCategory: this.value
};
},
computed: {
flattenCategories() {
return this.flatten(this.categories);
}
},
watch: {
value(newValue) {
this.selectedCategory = newValue;
},
selectedCategory(newCategory) {
this.$emit('input', newCategory);
}
},
methods: {
flatten(categories, prefix = '') {
let result = [];
for (const category of categories) {
const label = prefix + category.name;
result.push({ ...category, label });
if (category.children && category.children.length > 0) {
result = result.concat(this.flatten(category.children, label + ' / '));
}
}
return result;
},
getCategoryLabel(category) {
return category.label.replace(/\//g, ' / ');
},
handleCategoryChange() {
console.log('Selected category:', this.selectedCategory);
}
}
};
</script>在需要的页面引入组件：
<template>
<div>
<category-select v-model="selectedCategory" :categories="categories" @input="handleCategorySelect"></category-select>
<p>Selected Category: {{ selectedCategory }}</p>
</div>
</template>
<script>
//引入组件
import CategorySelect from './CategorySelect.vue';
export default {
components: {
CategorySelect
},
data() {
return {
//默认选择的ID
selectedCategory: '',
categories: [
{
"id": 2,
"parent_id": 0,
"name": "代码",
"children": [
{
"id": 6,
"parent_id": 2,
"name": "PHP",
"children": [
{
"id": 31,
"parent_id": 6,
"name": "tools"
},
{
"id": 30,
"parent_id": 6,
"name": "递归"
},
{
"id": 8,
"parent_id": 6,
"name": "算法"
},
{
"id": 7,
"parent_id": 6,
"name": "类"
}
]
}
]
},
{
"id": 1,
"parent_id": 0,
"name": "面试题",
"children": [
{
"id": 5,
"parent_id": 1,
"name": "css"
},
{
"id": 4,
"parent_id": 1,
"name": "Javascript"
},
{
"id": 3,
"parent_id": 1,
"name": "PHP"
}
]
}
]
};
},
methods: {
//选中操作
handleCategorySelect(category) {
this.selectedCategory = category;
}
}
};
</script>温馨提示：自己可以在组件里面完成分类数据请求，这样直接在其它页面用来显示即可。