例如这个res.data对象：
{"id": "15","name": "火灾"
}
这样子解析吧：
let types = JSON.parse(JSON.stringify(res.data))console.log("types is " + types)console.dir(types)for(var i = 0; i < types.length; i++) {console.log("types[i] is " + types[i])console.dir(types[i])this.disasterTypeOptions.push({value: types[i].id,label: types[i].name})}
主要代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入样式 --><link rel="stylesheet" href="../../plugins/element-ui/index.css"/><link rel="stylesheet" href="../../styles/common.css"/><link rel="stylesheet" href="../../styles/page.css"/><style>.selectInput {position: relative;width: 100%;min-width: 100px;}.selectInput .flavorSelect {position: absolute;width: 100%;padding: 0 10px;border-radius: 3px;border: solid 1px #FF903D;line-height: 30px;text-align: center;background: #fff;top: 50px;z-index: 99;}.selectInput .flavorSelect .items {cursor: pointer;display: inline-block;width: 100%;line-height: 35px;border-bottom: solid 1px #f4f4f4;color: #666;}.selectInput .flavorSelect .none {font-size: 14px;}#disasterPublic-add-app .uploadImg .el-form-item__label::before {content: '*';color: #F56C6C;margin-right: 4px;}</style>
</head>
<body>
<div class="addBrand-container" id="disasterPublic-add-app"><div class="container"><el-formref="ruleForm":model="ruleForm":rules="rules":inline="true"label-width="180px"class="demo-ruleForm"><div><el-form-itemlabel="灾情类型:"prop="disasterType"><el-select v-model="disasterTypeId" placeholder="请选择灾情类型"><el-optionv-for="item in disasterTypeOptions":key="item.value":label="item.label":value="item.value"size="20"></el-option></el-select></el-form-item></div><div><el-form-itemlabel="灾情名称:"prop="name"><el-inputv-model="ruleForm.name"placeholder="请填写灾情名称:"maxlength="20"/></el-form-item></div><div><el-form-itemlabel="灾情地址:"prop="locationName"><el-inputv-model="ruleForm.locationName"placeholder="请填写灾情地址"maxlength="20"/></el-form-item></div><div><el-form-itemlabel="灾情图片:"class="uploadImg"><el-uploadclass="avatar-uploader"action="/common/upload":show-file-list="false":on-success="handleAvatarSuccess":on-change="onChange"ref="upload"><imgv-if="imageUrl":src="imageUrl"class="avatar"></img><iv-elseclass="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item></div><div class="address"><el-form-itemlabel="灾情描述:"prop="description"><el-inputv-model="ruleForm.description"type="textarea":rows="3"placeholder="物资描述，最长200字"maxlength="200"/></el-form-item></div><!--todo --><div class="subBox address"><el-form-item><el-button @click="goBack()">取消</el-button><el-buttontype="primary"@click="submitForm('ruleForm')">保存</el-button><el-buttonv-if="actionType == 'add'"type="primary"class="continue"@click="submitForm('ruleForm','goAnd')">保存并继续发布新的灾情</el-button></el-form-item></div></el-form></div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script src="../../api/disasterPublic.js"></script>
<script>new Vue({el: '#disasterPublic-add-app',data() {return {disasterTypeOptions: [],disasterTypeId: '',id: '',restKey: 0,textarea: '',value: '',imageUrl: '',actionType: '',dishList: [],vueRest: '1',index: 0,inputStyle: {'flex': 1},ruleForm: {'name': '','id': '','image': '','description': '','approvalState': '','isRevoke': false,'locationName': null,'status': true,},mak: false}},computed: {rules() {return {'name': [{'required': true, 'message': '请填写灾情名称', 'trigger': 'blur'}],'disasterType': [{'required': true, 'message': '请选择灾情类型', 'trigger': 'blur'}],'locationName': [{'required': true, 'message': '请选择灾情类型', 'trigger': 'blur'}],'description': [{'required': true, 'message': '请选择灾情类型', 'trigger': 'blur'}],}}},created() {this.initDisasterTypeOptions()this.id = requestUrlParam('id')this.actionType = this.id ? 'edit' : 'add'if (this.id) {this.init()}},mounted() {},methods: {initDisasterTypeOptions() {allDisasterType().then(res => {if (String(res.code) === '1') {let types = JSON.parse(JSON.stringify(res.data))for (var i = 0; i < types.length; i++) {console.log("types[i] is " + types[i])console.dir(types[i])this.disasterTypeOptions.push({value: types[i].id,label: types[i].name})}} else {this.$message.error(res.msg || '获取灾情类型失败')}})},async init() {queryDisasterPublicById(this.id).then(res => {console.log(res)if (String(res.code) === '1') {this.ruleForm = {...res.data}this.ruleForm.price = String(res.data.price / 100)this.ruleForm.volume = String(res.data.volume / 100)this.ruleForm.weight = String(res.data.weight / 100)this.ruleForm.status = res.data.status == '1'this.imageUrl = `/common/download?name=${res.data.image}`} else {this.$message.error(res.msg || '操作失败')}})},submitForm(formName, st) {this.$refs[formName].validate((valid) => {if (valid) {let params = {...this.ruleForm}params.status = this.ruleForm ? 1 : 0params.price *= 100params.volume *= 100params.weight *= 100//todoif (!this.imageUrl) {this.$message.error('请上传灾情图片')return}if (this.actionType == 'add') {delete params.idaddDisasterPublic(params).then(res => {if (res.code === 1) {this.$message.success('灾情添加成功！')if (!st) {this.goBack()} else {this.imageUrl = ''this.ruleForm = {'name': '','id': '','image': '','description': '','status': true,}}} else {this.$message.error(res.msg || '操作失败')}}).catch(err => {this.$message.error('请求出错了：' + err)})} else {delete params.updateTimeeditDisasterPublic(params).then(res => {if (res.code === 1) {this.$message.success('灾情修改成功！')this.goBack()} else {this.$message.error(res.msg || '操作失败')}}).catch(err => {this.$message.error('请求出错了：' + err)})}} else {return false}})},handleAvatarSuccess(response, file, fileList) {// 拼接down接口预览if (response.code === 0 && response.msg === '未登录') {window.top.location.href = '/backend/page/login/login.html'} else {this.imageUrl = `/common/download?name=${response.data}`//后端的urlthis.ruleForm.image = response.data}},onChange(file) {if (file) {const suffix = file.name.split('.')[1]const size = file.size / 1024 / 1024 < 2if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')this.$refs.upload.clearFiles()return false}if (!size) {this.$message.error('上传文件大小不能超过 2MB!')return false}return file}},goBack() {window.parent.menuHandle({id: '8',url: '/backend/page/disasterPublic/list.html',name: '灾情发布'}, false)}}})
</script>
</body>
</html>
