前端菜鸟小记

day2 ：实现关联选框，选完1以后根据1选择2的类目  element框架 选择器

<el-select v-model="selectedCategory" placeholder="请选择1" @change="updateSubcategories"> <el-option v-for="category in categories" :key="category.id" :label="category.label" :value="category.id" ></el-option> </el-select> <el-select v-model="selectedSubcategory" placeholder="请选择2"> <el-option v-for="subcategory in subcategories" :key="subcategory.id" :label="subcategory.label" :value="subcategory.id" ></el-option> </el-select>

定义字段：selectedCategory: "", selectedSubcategory: "", categories: [ { id: 1, label: "选项1" }, { id: 2, label: "选项2" }, { id: 3, label: "选项3" }, { id: 4, label: "选项4" } ], subcategories: []

 methods：（根据选项1更新选项2选项）

updateSubcategories() { this.selectedSubcategory = ""; switch (this.selectedCategory) { case 1: this.subcategories = [ { id: 1, label: "选项1" }, { id: 2, label: "选项2" }, { id: 3, label: "选项3" }, { id: 4, label: "选项4" }, { id: 5, label: "选项5" } ]; break; case 2: this.subcategories = [ { id: 6, label: "选项6" }, { id: 7, label: "选项7" } ]; break; case 3: this.subcategories = [ { id: 8, label: "其他" } ]; break; case 4: this.subcategories = [ { id: 9, label: "其他" } ]; break;

default: this.subcategories = [];

}

}

}