## MoreClass 级联选择器弹出层 > **组件名:MoreClass** > 代码块: `MoreClass` > 关联组件:`el-element` > **子组件:传参** > data:组件接收的参数默认为[] 其中classifiable等于true的时候默认到该组件 > lable: "分类",----------------------------输入框名称(选填) > type: "el-select",------------------------输入框类型(el-inpit,el-selec组件没用到但最好必填) > enName: "cate_id",------------------------返回值与model双向绑定(必填) > placeholder: "请选择机器类型",-------------输入框占位文本(选填) > size: "small",----------------------------输入框大小(选填) > show: true,-------------------------------是否展示(必填) > filterable: true,-------------------------是否可搜索(选填) > clearable: true,--------------------------是否可清除(选填) > classifiable: true,-----------------------是否分类,使用组件必填(必填) > disabled: false,--------------------------是否禁用(选填) > loading: false,---------------------------加载效果(选填) > options: [],------------------------------输入框下拉的值,父组件调用接口传递 > formLabelAlign:组件返回的参数与v-model双向绑定{} > disabled:组件是否禁用默认false > size:组件大小默认值small > width:组件宽度默认450 > Title:组件最外层占位文本默认为请选择分类/品牌/型号 > **子组件:方法** > SearchClass:点击查询后直接父组件中打印formLabelAlign的值 > ClearInput:父组件绑定ref直接调用子组件ClearInput()方法,然后子组件会给父组件抛出一个resetfrom()方法,在父组件resetfrom()中清空formLabelAlign中的邦定值 > **父组件:方法** > getphonetype():父组件中获取第一条分类数据 > SelectChange():选择数据后调用 后面是处理方法其中如果不是同一个接口resetFields中的值需要改变,后续代码也要修改 SelectChange(item) { const resetFields = { cate_id: ["brand_id", "model_id", "color_id", "rom_id"], brand_id: ["model_id", "color_id", "rom_id"], model_id: ["color_id", "rom_id"], }; Object.entries(resetFields).forEach(([field, resetFields]) => { if (item.enName === field) { resetFields.forEach((field) => { this.formLabelAlign[field] = ""; this.input.find((res) => res.enName === field).options = []; }); } }); /** 获取型号 颜色 容量*/ if (item.enName == "cate_id" && this.formLabelAlign.cate_id != "") { this.getqualityinfo( { cate_id: this.formLabelAlign.cate_id }, 1, "brand_id" ); } else if ( item.enName == "brand_id" && this.formLabelAlign.brand_id != "" ) { this.getqualityinfo( { cate_id: this.formLabelAlign.cate_id, brand_id: this.formLabelAlign.brand_id, }, 2, "model_id" ); } else if ( item.enName == "model_id" && this.formLabelAlign.model_id != "" ) { this.getqualityinfo( { cate_id: this.formLabelAlign.cate_id, brand_id: this.formLabelAlign.brand_id, model_id: this.formLabelAlign.model_id, }, 3, "color_id" ); } }, // 获取品牌,颜色,模型数据 async getqualityinfo(data, val, itm) { this.input.forEach((item) => { if (item.enName == itm) { item.loading = true; } }); try { const res = await cate_brand_list_in_stock(data); this.input.forEach((item) => { if (item.enName == itm) { item.loading = false; } }); if (res.errcode !== 0) return; if (val == 1) { this.updateInputOptions("brand_id", res.datas); } else if (val == 2) { this.updateInputOptions("model_id", res.datas); } else { this.updateInputOptions("rom_id", res.datas.rom_list); this.updateInputOptions("color_id", res.datas.color_list); } } catch (error) { // 处理错误 console.error(error); } }, 处理数据 updateInputOptions(enName, list) { const mappedList = Array.isArray(list) ? list.map((item) => ({ label: item.label, value: item.value })) : []; this.input.forEach((r, i) => { if (r.enName === enName) { if ( r.enName !== "model_id" && r.enName !== "cate_id" && r.enName !== "brand_id" ) { this.input[i].show = Array.isArray(list) && list.length ? true : false; } this.input[i].options = mappedList; } }); },