Directorio de artículos
prefacio
A veces, los datos proporcionados por el backend en el proyecto no pueden cumplir completamente con los requisitos de datos del frontend.Por ejemplo, en la cartera de proyectos de element-ui+vue, los datos en el cuadro desplegable tienen la forma de una matriz. Sin embargo, los colegas del back-end son de hecho datos de objetos. Por supuesto, puede negociar con el back-end para cambiarlo a los datos que desee... Pero esto suele ser problemático. El front-end al que le gusta escribir código en silencio. decide convertirlo por sí mismo.
提示:正文内容
1. Los datos proporcionados por el backend
2. Cómo convertir
console.log('res:', res);
let resObj = res.data.data; //获取后台给的对象数据
let arr = []; //定义一个空数组
for (let key in resObj) {
//用for循环转换resObj对象
arr.push({
value: key,
label: resObj[key]
});
}
this.deviceList = arr; //将改数组赋值给数组deviceList,渲染到页面上
<el-form-item
label="报警类型"
prop="roomNumber"
>
<el-select
placeholder="请选择"
clearable
default-first-option
v-model="formInline.alarmDeviceType"
@change="onSearch"
>
<el-option
v-for="(list,k) in deviceList" //将数组渲染到页面上
:key="k"
:label="list.label"
:value="list.value"
></el-option>
</el-select>
</el-form-item>
3. Resultado final
Eso es todo por compartir, si te ayuda no olvides darle me gusta!