vue ivew的form的动态生成lable? 400 报错

vue ivew的form的动态生成lable? 400 报错

<template>

<Form ref="formInline" :model="formInline" :label-width="110" :rules="ruleInline">

<Spin size="large" v-show="!add.isAdd && (loading || add.detailLoading)" class="base-form-loading"></Spin>

<FormItem prop="interface_resources_name" label="接口资源名称">

<Input type="text" v-model="formInline.interface_resources_name" placeholder="接口资源名称"></Input>

</FormItem>

<FormItem prop="code" label="系统编号">

<Input type="text" v-model="formInline.code" placeholder="系统编号"></Input>

</FormItem>

<FormItem label="所属分类">

<Select v-model="formInline.the_category">

<Option v-for="(t,i) in classTyoe" :value="t.id" :key="i">{{t.name}}</Option>

</Select>

</FormItem>

<FormItem prop="sort" label="排序">

<Input type="text" v-model="formInline.sort" placeholder="排序"></Input>

</FormItem>

<FormItem prop="interface_address" label="接口地址">

<Input type="text" v-model="formInline.interface_address" placeholder="接口地址"></Input>

</FormItem>

<FormItem prop="returns_format" label="返回格式">

<Input type="text" v-model="formInline.returns_format" placeholder="返回格式"></Input>

</FormItem>

<FormItem prop="request_way" label="请求方式">

<Input type="text" v-model="formInline.request_way" placeholder="请求方式"></Input>

</FormItem>

<FormItem prop="sample_request" label="请求示例">

<Input type="text" v-model="formInline.sample_request" placeholder="请求示例"></Input>

</FormItem>

<FormItem label="请求参数说明">

<child2 :formDynamic="formInline.ChildEntryAddressList"></child2>

</FormItem>

<FormItem label="返回参数说明">

<typetab :formDynamic="formInline.ChildEntryAddressList"></typetab>

</FormItem>

<FormItem label='JSON返回示例'>

<Input v-model="formInline.return_json" :rows="4" type="textarea"></Input>

</FormItem>

<FormItem label='资源备注'>

<Input v-model="formInline.resource_note" :rows="4" type="textarea"></Input>

</FormItem>

<Button type="primary" long @click="handleSubmit" :loading="submitLoading" :disabled="loading">提 交</Button>

</Form>

</template>

 

<script>

import child2 from '../../tables/baseTab'

import typetab from '../../tables/typeTab'

import _ from 'lodash'

export default {

components: {child2, typetab},

data () {

return {

formInline: {

interface_resources_name: '',

code: '',

interface_address: '',

the_category: [],

returns_format: '',

request_format: '',

request_way: '',

sample_request: '',

return_json: '',

resource_note: '',

ChildEntryAddressList: []

},

ChildEntryAddressList: [],

ruleInline: {

interface_resources_name: [

{ required: true, message: '必填项不能为空', trigger: 'blur' }

],

interface_address: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],

returns_format: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],

code: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],

sort: [{ required: true, type: 'number', message: '必填项不能为空', trigger: 'blur' }],

request_format: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],

request_way: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],

sample_request: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],

return_json: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],

resource_note: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],

the_category: [

{

type: 'array',

required: true,

message: '必填项不能为空',

trigger: 'blur'

}

]

},

loading: false,

classTyoe: [],

submitLoading: false

}

},

props: ['formValidate', 'add', 'baseUrls', 'tableName'],

mounted () {

this.init()

},

watch: {

'add.modal' (val) {

if (!val) {

this.$refs.formInline.resetFields()

} else {

this.renderForm(this.formValidate)

}

},

formValidate: {

deep: true,

handler: function (val, oldVal) {

this.renderForm(val)

}

}

},

methods: {

renderForm (obj) {

for (let attr in this.formInline) {

if (attr === 'division') {

this.formInline[attr] = obj[attr] ? obj[attr].split(',') : []

} else {

this.formInline[attr] = obj[attr] ? obj[attr] : ''

}

}

this.formInline.ChildEntryAddressList = _.cloneDeep(obj.ChildList)

},

init () {

this.loading = true

this.$ajax({

method: 'post',

url: 'api/open/ClassificationInfo/queryAll'

 

}).then(results => {

this.loading = false

this.classTyoe = results.data

})

},

handleSubmit () {

let obj = {}

let basepush = {}

basepush.main_scenic = ''

this.ChildEntryAddressList.forEach((t, i) => {

// if (t.status === 1 && t.value) {

// LsScenicBasicObj.main_scenic += t.value + ','

// }

basepush.main_scenic += t.value + ','

})

console.log('object', this.ChildEntryAddressList)

 

obj['ChildEntryAddressList'] = []

this.formInline.ChildEntryAddressList.forEach((t, i) => {

obj['ChildEntryAddressList'].push({

name: t.name,

mandatory: t.mandatory,

parameter_type: t.parameter_type,

instructions: t.instructions

})

})

console.log('object2222', this.formInline.ChildEntryAddressList)

for (let attr in this.formInline) {

if (attr === 'division') {

obj[attr] = this.formInline[attr].join(',')

} else {

obj[attr] = this.formInline[attr]

}

}

if (!this.add.isAdd && this.add.id) {

obj.id = this.add.id

}

 

this.$refs.formInline.validate(valid => {

if (valid) {

this.submitLoading = true

this.$ajax({

method: 'post',

url: this.add.isAdd ? this.baseUrls.create : this.baseUrls.update,

data: obj

})

.then(result => {

this.submitLoading = false

this.$emit('getId', result) // {...result, modal: false}

this.$Notice.success({

title: '保存成功！',

duration: 3

})

})

.catch(result => {

this.submitLoading = false

// this.$refs.upload.clearFiles()

})

} else {

this.$Message.error('请检查表单系填写是否有误!')

}

})

}

}

}

</script>

 

<style>

.base-form-loading .ivu-spin-dot {

display: inline-block;

}

</style>

 

<style lang="less" scoped>

.file-img {

position: absolute;

top: 1px;

left: 120px;

width: 30px;

height: 30px;

transition: all ease 0.5s;

&:hover {

z-index: 999999;

top: -80px;

width: 140px;

height: auto;

}

}

</style>

请求和返回的lable需要动态生成