首先，在级联选择的情况下，数据集合中的数据会在不同的下拉框中显示并选择,就像咱们选择省市县级联动一样，我在这里分享了一段代码，可以适配所有级联下拉框，并且不管级联有多少层级，只需要根据代码进行嵌套即可。接口方面：
首先，我创建了一个数据集合来模拟从接口获取的数据：
data = [
{ code: "14020002001", color: "红", da: "900", name: "苹果", spec: "14*15*204", type: "水果" },
{ code: "14020002002", color: "黄", da: "900", name: "香蕉", spec: "14*15*205", type: "水果" },
{ code: "14020002003", color: "玫红", da: "900", name: "火龙果", spec: "14*15*201", type: "水果" },
{ code: "14020002004", color: "绿", da: "900", name: "黄瓜", spec: "14*15*205", type: "蔬菜" },
{ code: "14020002005", color: "白", da: "900", name: "萝卜", spec: "14*15*205", type: "蔬菜" },
{ code: "14020002006", color: "紫", da: "900", name: "茄子", spec: "14*15*205", type: "蔬菜" }
];
第一级的"type"直接从"data"中获取：
html
<el-select style="width: 220px" v-model="temp.type" filterable @change="lxChange($event)">
<el-option v-for="v in Options" :key="v.type" :label="v.type" :value="v.type"></el-option>
</el-select>
第二级的"名称"，根据选中的"type"筛选数据：
html
<el-form-item prop="name" label="产品名称">
<el-select style="width: 220px" v-model="temp.name" @change="typeChange" filterable>
<el-option v-for="(v, index) in nameList" :key="index" :label="v.name" :value="v.name"></el-option>
</el-select>
</el-form-item>
第三级的"规格"，根据选中的"type"和"名称"筛选数据：
html
<el-form-item prop="unit" label="规格">
<el-select style="width: 220px" v-model="temp.spec" @change="selectspecFun($event)" filterable>
<el-option v-for="(v,index) in specList" :key="index" :label="v.spec" :value="v.spec"></el-option></el-select>
</el-form-item>
第四级的"颜色"，根据选中的"type"，"名称"和"规格"筛选数据：
html
<el-form-item prop="color" label="颜色">
<el-select style="width: 220px" v-model="temp.color" @change="colorSeletFun($event)">
<el-option v-for="(v, index) in colorList" :key="index" :label="v.color" :value="v.color"></el-option>
</el-select>
</el-form-item>
在"lxChange"方法中，根据选中的"type"更新级联下拉框的数据。 首先，我们需要创建一个数据集合来模拟从接口获取的数据：
javascript
getOption() {
// 获取产品名称
this.$axios({
url: 'erp/man/product/getProductName',
method: 'GET',
}).then((response) => {
let tempArr = response.data || [];
this.Options = tempArr;
let nameArr = [];
this.nameList = tempArr.filter((item) => {
if (item.type === this.selectedType) {
if (!nameArr.includes(item.name)) {
nameArr.push(item.name);
return true;
}
} else {
// 处理其他逻辑
}
return false;
});
});
},
在上面的代码中，我们通过接口获取产品名称，并根据所选的类型筛选出相关的名称列表。
当选择产品类型(type)发生改变时，我们可以根据所选的类型去筛选规格(spec)的列表数据：
javascript
typeChange(val) {
this.specList = [];
this.colorList = [];
this.temp.spec = '';
this.temp.color = '';
let nameDetailList = this.findProduct({
name: this.temp.name
});
let tempSpecList = [];
this.specList = nameDetailList.filter((item) => {
if (item.type === this.selectedType) {
if (!tempSpecList.includes(item.spec)) {
tempSpecList.push(item.spec);
return true;
}
}
return false;
});
},
当选择规格(spec)发生改变时，我们可以根据所选的规格去筛选颜色(color)的列表数据：
javascript
selectspecFun(event) {
let specLists = this.findProduct({
name: this.temp.name,
spec: this.temp.spec
});
let tempColor = [];
this.colorList = specLists.filter((item) => {
if (item.type === this.selectedType) {
if (!tempColor.includes(item.color)) {
tempColor.push(item.color);
return true;
}
}
return false;
});
},
当选择颜色(color)发生改变时，我们可以根据所选的颜色获取最终的产品(code)：
colorSeletFun(val) {
let colorLists = this.findProduct({
name: this.temp.name,
spec: this.temp.spec,
color: val
});
if (colorLists.length) {
this.temp.code = colorLists[0].code;
} else {
this.temp.code = '';
}
},
重点讲一下这段代码：大家可以看到每一层的筛选都用到了它
这段代码是一个筛选数组的函数，它接受一个数据集合和一个参数对象。它根据参数对象的键值与数据集合的元素进行比较，并返回符合所有参数条件的结果数组。
findProduct (param = {}) {
let arr = []
arr = this.Options.filter((item)=> {
let flagList = []
for (const key in param) {
if (param[key] == item[key]) {
flagList.push(true)
}else {
flagList.push(false)
}
}
let flag = flagList.every(x=> x === true)
if(flag) {
return true
}
return false
})
return arr
},
```
