1.页面部分
<div v-for="(item,index) in formList" :key="index">
<el-col :span="6" v-if="item.inputType==0">
<el-form-item :label="item.conditionName" :prop="item.conditionCode"
:rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }">
<el-input v-model.trim="detailForm[item.conditionCode]" :placeholder="item.placeHolder"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6" v-else-if="item.inputType==1">
<el-form-item :label="item.conditionName" :prop="item.conditionCode"
:rules="{required: item.required==0?false:true, message: item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }">
<el-input v-model.number="detailForm[item.conditionCode]"
:placeholder="item.placeHolder" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24" v-else-if="item.inputType==2">
<el-form-item :label="item.conditionName" :prop="item.conditionCode" :rows="3"
:rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }">
<el-input clearable style="width: 100%" v-model.trim="detailForm[item.conditionCode]"
autocomplete="off" placeholder="请输入" type="textarea" maxlength="100"></el-input>
</el-form-item>
</el-col>
<el-col :span="24" v-else-if="item.inputType==3">
<el-form-item :label="item.conditionName" :prop="item.conditionCode"
:rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }">
<!-- <el-input v-model="detailForm[item.conditionCode]" v-show="false" /> -->
<el-upload list-type="picture-card" action="#" :headers="headers" multiple
:before-upload="beforeUpload" :http-request="f_upload" :on-remove="handleRemoveUrl"
:on-preview="handlePictureCardPreview" :file-list="fileImgurl"
accept=".jpg,.jpeg,.png,.bmp">
<i slot="default" class="el-icon-plus"></i>
<div class="el-upload__tip" slot="tip">
仅支持JPG、JPEG、PNG、BMP格式文件
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</el-col>
<el-col :span="24" v-else-if="item.inputType==4 && item.singleton==0">
<el-form-item :label="item.conditionName" :prop="item.conditionCode"
:rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }">
<el-checkbox-group v-model="detailForm[item.conditionCode]">
<el-col :span="24" v-if="item.optionList">
<el-checkbox v-for="(it,ind) in item.optionList" :label="it.name"
:key="ind"></el-checkbox>
</el-col>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :span="6" v-else-if="item.inputType==4 && item.singleton==1">
<el-form-item :label="item.conditionName" :prop="item.conditionCode"
:rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }">
<el-radio-group v-model="detailForm[item.conditionCode]">
<el-col :span="24" v-if="item.optionList">
<el-radio v-for="(it,ind) in item.optionList" :label="it.name"
:key="ind">{{it.name}}</el-radio>
</el-col>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6" v-else-if="item.inputType==5">
<el-form-item :label="item.conditionName" :prop="item.conditionCode"
:rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }">
<el-select v-model="detailForm[item.conditionCode]" placeholder="请选择"
style="width: 100%" v-if="item.optionList"
:multiple="item.inputType==5 && item.singleton==0">
<el-option v-for="(it,ind) in item.optionList" :key="ind" :label="it.name"
:value="it.name">
</el-option>
</el-select>
</el-form-item>
</el-col>
</div>
2.数据格式
文章来源：https://www.toymoban.com/news/detail-628092.html
"decisionConditionList": [
{
"conditionCode": "carHygiene",//表单键
"conditionName": "车辆卫生",//表单名称
"inputType": 5,//表单类型
"conditionValueList": [
"是"
],//表单值
"required": 1,//是否必填
"singleton": 0,
"placeHolder": "请选择",
"optionList": [
{
"name": "是",
"defaultType": 0
},
{
"name": "否",
"defaultType": null
}
]
},
{
"conditionCode": "productSpotCheck",
"conditionName": "是否抽检",
"inputType": 4,
"conditionValueList": [
"否"
],
"required": 1,
"singleton": 1,
"placeHolder": "请选择",
"optionList": [
{
"name": "是",
"defaultType": 0
},
{
"name": "否",
"defaultType": 1
}
]
},
{
"conditionCode": "carPlateNum",
"conditionName": "车辆号",
"inputType": 0,
"conditionValueList": [
"1"
],
"required": 1,
"singleton": null,
"placeHolder": "请输入",
"optionList": null
},
{
"conditionCode": "carPlate",
"conditionName": "车辆数量",
"inputType": 1,
"conditionValueList": [
"1"
],
"required": 0,
"singleton": null,
"placeHolder": "请输入",
"optionList": null
},
{
"conditionCode": "problemDesc",
"conditionName": "问题类型",
"inputType": 4,
"conditionValueList": [
"问题一"
],
"required": 1,
"singleton": 0,
"placeHolder": "请选择",
"optionList": [
{
"name": "问题一",
"defaultType": 0
},
{
"name": "问题二",
"defaultType": 0
},
{
"name": "问题三",
"defaultType": 0
},
{
"name": "问题四",
"defaultType": 0
}
]
},
{
"conditionCode": "imgUrl",
"conditionName": "图片",
"inputType": 3,
"conditionValueList": [
"https://warehouse-permanent.obs.cn-east-3.myhuaweicloud.com/74cc681c-fe39-429c-886e-8e086378c2ef.png",
"https://warehouse-permanent.obs.cn-east-3.myhuaweicloud.com/5b312d59-8c40-431b-ad99-ac908bbb7707.png"
],
"required": 1,
"singleton": null,
"placeHolder": "请选择",
"optionList": null
},
{
"conditionCode": "remarkTwo",
"conditionName": "备注",
"inputType": 2,
"conditionValueList": [
"1"
],
"required": 0,
"singleton": null,
"placeHolder": "1",
"optionList": null
}
],
3.数据处理 因为后端给的数据都是数组 表单有些需要数组有些需要字符串
this.formList = res.data.data.decisionConditionList;
if (this.formList) {
this.formList.forEach(a => {
if (a.inputType == 4 && a.singleton == 0 || a.inputType == 5 && a.singleton == 0) {
this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList : [])
} else if (a.inputType == 3) {
var fileImgurl = []
if (a.conditionValueList) {
a.conditionValueList.forEach((item, index) => {
fileImgurl.push(
Object.assign({}, { url: item })
)
})
this.fileImgurl=fileImgurl
}
this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList : [])
}
else {
this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList.toString() : '')
}
})
}
4.关于图片部分的js
// 上传之前
beforeUpload(file) {
if (!this.checkFileType(file)) {
return false
}
this.$forceUpdate()
},
// 效验文件类型
checkFileType(file) {
let allowTypesSet = new Set(["jpg", "jpeg", "png", "bmp", "pdf"])
let fileType = file.name.replace(/.+\./, "")
if (!allowTypesSet.has(fileType)) {
this.$message({
type: "warning",
message: "不支持该文件类型"
})
return false
}
return true
},
//预览图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//删除图片
handleRemoveUrl(file, fileList) {
if (fileList.length) {
this.fileImgurl.filter((item, index) => {
if (item.url == file.url) {
this.fileImgurl.splice(index, 1);
}
});
let results = this.fileImgurl.map(n => n.url);
this.formList.forEach(index => {
if (index.inputType == 3) {
this.$set(this.detailForm, index.conditionCode, results)
}
})
} else {
this.formList.forEach(index => {
if (index.inputType == 3) {
this.$set(this.detailForm, index.conditionCode, [])
}
})
this.fileImgurl = []
}
},
// 导入
f_upload(data) {
const formData = new FormData()
formData.append("file", data.file)
this.handlefileUpload(formData)
},
//上传方法
handlefileUpload(formData) {
fileUpload(formData)
.then((res) => {
const { code, msg } = res.data
if (code == 200) {
this.formList.forEach(a => {
if (a.inputType == 3) {
var arr = a.conditionValueList ? a.conditionValueList : [];
arr.push(res.data.data)
this.$set(this.detailForm, a.conditionCode, arr)
}
})
this.fileImgurl.push({ url: res.data.data })
} else {
const title = "操作失败"
const type = "error"
this.$notification(title, type, msg)
}
})
.catch(() => { })
},
4.提交
//提交这里还是要按照上面的格式提交文章来源地址https://www.toymoban.com/news/detail-628092.html
this.formList.forEach((item, index) => {
this.detailForm.decisionConditionList.push(
Object.assign({},item, { conditionValueList: item.inputType == 4 && item.singleton == 0 || item.inputType == 5 && item.singleton == 0 || item.inputType == 3 ? this.detailForm[item.conditionCode] : [this.detailForm[item.conditionCode]] })
)
})
到了这里，关于element+vue 之动态form的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
