vue form表单的input不能输入
代码:<template><el-form :model="formData" ref="formData" label-width="200px"><el-form-item v-for="item in tableColumnsFields" :label="item.columnNameCn" :key="item.id"...
·
代码:
<template>
<el-form :model="formData" ref="formData" label-width="200px">
<el-form-item v-for="item in tableColumnsFields" :label="item.columnNameCn" :key="item.id" :prop="item.columnNameEn" >
<el-select v-if="item.mapDicts===1" v-model="formData[item.columnNameEn]" style="width:100%">
<el-option v-for="option in item.dicts"
:label="option.dictKey"
:value="option.dictValue"></el-option>
</el-select>
<el-input v-else v-model="formData[item.columnNameEn]" style="width:100%"></el-input>
</el-form-item>
</el-form>
</template>
<script>
import * as api from '@/api/dataset-api.js'
export default {
components:{
},
data(){
return{
api,
formData:{},
tableColumnsFields:[],
}
},
created(){
this.getTableColumns()
},
mounted(){
},
methods:{
getTableColumns(){
const id = this.$route.query.id
this.api.getColumnInfoByTableId(id).then(res=>{
if(res.retcode === "000000"){
const {bizdata} = res
this.tableColumnsFields = bizdata
this.tableColumns = bizdata.map(item=>{
this.formData[item.columnNameEn]='' //新增formData
})
})
}else{
console.log('报错')
}
})
},
},
}
</script>
使用 this.formData[item.columnNameEn]='' //新增formData 会导致输入框和选择框都用不了,
正确的写法是:
const formFiels = {}
this.tableColumns = bizdata.map(item=>{
formFiels[item.columnNameEn]=''
}
this.formData = formFiels //一次性赋值
这样就可以了!
根本原因我还没参透,希望广大网友能解答一下。
更多推荐
已为社区贡献9条内容
所有评论(0)