¿Por qué la configuración el-cascaderde props?
Si esta opción está configurada, los datos solicitados no necesitarán ser procesados recursivamente en absoluto, solo necesita asignar los datos de respuesta a la fuente de datos.cascaderList
el código se muestra a continuación:
<el-cascader
v-model="cascaderValue"
:options="cascaderList"
:props="cascaderProps"
@change="cascaderHandleChange"
/>
En datos:
data:{
return{
cascaderValue:[],
cascaderList:[], //数据源
cascaderProps: {
children: 'treeList', //匹配响应数据中的children
label: 'name', //匹配响应数据中的name
value: 'id' //匹配响应数据中的id
}
}
}
Bueno, con esta configuración, solo necesita asignar la matriz devuelta por la solicitud a la fuente de datoscascaderList
La ventaja es que no necesitas atravesar tu mismo de forma recursiva. Si no configuras la opción de accesorios, entonces necesito atravesar de forma recursiva, de la siguiente manera
let list = responseData;
this.cascaderList= [];
for (let i = 0; i < list.length; i++) {
let children = [];
if (list[i].children != null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) {
children.push({
label: list[i].children[j].name, value: list[i].children[j].id});
}
}
this.cascaderList.push({
label: list[i].name, value: list[i].id, children: children});
}