記事ディレクトリ
序文
プロジェクトのバックエンドによって提供されるデータがフロントエンドのデータ要件を完全に満たせない場合があります。たとえば、element-ui+vue プロジェクト ポートフォリオでは、ドロップダウン ボックスのデータは配列の形式です。ただし、バックエンドの同僚は確かにオブジェクト データです。もちろん、バックエンドと交渉して、必要なデータに変更することもできます...しかし、これは多くの場合面倒です。静かにコードを書きたいフロントエンド独自に変換することを決定します。
提示:正文内容
1. バックエンドによって与えられるデータ
2.変換方法
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. 最終結果
共有するのは以上です。役に立った場合は、「いいね!」することを忘れないでください。