<template>
<div class="dynamic" style="margin-top: 50px">
<div class="left">
<el-form :model="dynamicForm" label-width="120px">
<el-form-item label="表单类型">
<el-radio-group v-model="dynamicForm.formType">
<el-radio :label="1">正常的input框</el-radio>
<el-radio :label="2">单选radio</el-radio>
<el-radio :label="3">多选check</el-radio>
<el-radio :label="4">文件类型</el-radio>
<el-radio :label="5">textarea类型</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="key" v-if="dynamicForm.formType != 4">
<el-input v-model="dynamicForm.key" />
</el-form-item>
<el-form-item label="name">
<el-input v-model="dynamicForm.name" />
</el-form-item>
<!-- 单选按钮 -->
<div v-if="dynamicForm.formType == 2">
<div v-for="(item, index) in dynamicForm.radioArr" :key="index">
<el-form-item>
<span slot="label">{{ "单选选项key" + (index + 1) }}</span>
<el-input v-model="dynamicForm.radioArr[index].key">
<el-button
v-if="index == 0"
slot="append"
icon="el-icon-plus"
@click.native="addRadioItem('radio')"
></el-button>
<el-button
v-if="index != 0 && index != 1"
slot="append"
icon="el-icon-minus"
@click.native="removeRadioItem(index, 'radio')"
></el-button>
</el-input>
</el-form-item>
<el-form-item>
<span slot="label">{{ "单选选项value" + (index + 1) }}</span>
<el-input v-model="dynamicForm.radioArr[index].value" />
</el-form-item>
</div>
</div>
<!-- 复选框 -->
<div v-if="dynamicForm.formType == 3">
<div
v-for="(checkItme, checkIndex) in dynamicForm.checkedArr"
:key="checkIndex"
>
<el-form-item>
<span slot="label">{{ "复选框选项key" + (checkIndex + 1) }}</span>
<el-input v-model="dynamicForm.checkedArr[checkIndex].label">
<el-button
v-if="checkIndex == 0"
slot="append"
icon="el-icon-plus"
@click.native="addRadioItem('checked')"
></el-button>
<el-button
v-if="checkIndex != 0 && checkIndex != 1"
slot="append"
icon="el-icon-minus"
@click.native="removeRadioItem(checkIndex, 'checked')"
></el-button>
</el-input>
</el-form-item>
</div>
</div>
</el-form>
<el-button type="primary" @click="confirmBtn">确认添加</el-button>
</div>
<div class="right">
<el-form :model="toForm" label-width="120px">
<el-form-item
v-for="(formItem, formIndex) in toItemArr"
:key="formIndex"
:label="formItem.name"
:prop="formItem.key"
>
<el-input
v-model="toForm[formItem.key]"
v-if="formItem.formType == 1"
/>
<el-radio-group
v-model="toForm[formItem.key]"
v-if="formItem.formType == 2"
>
<el-radio
v-for="(radioItem, radioIndex) in formItem.radioArr"
:key="radioIndex"
:label="radioItem.key"
>{{ radioItem.value }}</el-radio
>
</el-radio-group>
<el-checkbox-group
v-model="toForm[formItem.key]"
v-if="formItem.formType == 3"
>
<el-checkbox
v-for="(checkItem, checkIndex) in formItem.checkedArr"
:key="checkIndex"
:label="checkItem.label"
></el-checkbox>
</el-checkbox-group>
<el-upload
v-if="formItem.formType == 4"
action="https://jsonplaceholder.typicode.com/posts/"
multiple
:limit="3"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-input
type="textarea"
v-model="toForm[formItem.key]"
v-if="formItem.formType == 5"
/>
</el-form-item>
</el-form>
<el-button
type="primary"
@click="submitServe"
v-if="JSON.stringify(toForm) != '{}'"
>提交到服务器</el-button
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
toForm: {},
toItemArr: [],
dynamicForm: {
formType: 1, //表单类型 1代表正常的input 2代表单选按钮 3代表check复选框 4代表文件类型 5代表textarea类型
key: "", //表单中的每一项绑定的值(prop)
name: "", //表单中每一项的label
radioArr: [
{ key: "", value: "" },
{ key: "", value: "" },
],
checkedArr: [{ label: "" }, { label: "" }],
},
};
},
methods: {
//上传文件超出规定大小回调函数
handleExceed(){
},
//提交到服务器按钮
submitServe() {
console.log(this.toForm);
},
//确认按钮
confirmBtn() {
if(this.dynamicForm.formType==3){
// this.toForm[this.dynamicForm.key] = []; 注释掉的这部分有问题需要用$set的方式动态添加属性
this.$set(this.toForm,this.dynamicForm.key,[])
}else {
this.$set(this.toForm,this.dynamicForm.key,'')
}
this.toItemArr.push(this.dynamicForm);
this.dynamicForm = {
formType: 1, //表单类型 1代表正常的input 2代表单选按钮 3代表check复选框 4代表文件类型 5代表textarea类型
key: "", //表单中的每一项绑定的值(prop)
name: "", //表单中每一项的label
radioArr: [
{ key: "", value: "" },
{ key: "", value: "" },
],
checkedArr: [{ label: "" }, { label: "" }],
};
},
//添加radio的一项方法
addRadioItem(type) {
if (type == "radio") {
this.dynamicForm.radioArr.push({ key: "", value: "" });
} else if (type == "checked") {
this.dynamicForm.checkedArr.push({ label: "" });
}
},
//删除radio其中一项的方法
removeRadioItem(index, type) {
if (type == "radio") {
this.dynamicForm.radioArr.splice(index, 1);
} else if (type == "checked") {
this.dynamicForm.checkedArr.splice(index, 1);
}
},
},
};
</script>
<style lang="less" scoped>
.left {
float: left;
}
.right {
float: right;
margin-left: 200px;
margin-top: 9px;
}
</style>
动态生成表单(初版)
最新推荐文章于 2023-12-06 18:57:44 发布