vue+element 动态添加表单以及提交表单
vue+element 动态添加表单以及提交表单vue+element 动态添加表单以及提交表单新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowc
·
vue+element 动态添加表单以及提交表单
实现效果
html代码:
<el-form-item label="问题选项:" :label-width="formLabelWidth" prop="options" :inline="true">
<el-button @click="addItem" size="mini">添加选项</el-button>
<div v-for="(item, index) in addform.options" :key="index">
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item
:prop="'options.' + index + '.item'"
:rules="{
required: true, message: '选项序号不能为空', trigger: 'blur'
}"
>
<el-input placeholder="请输入选项序号,如A,B" autocomplete="off" size="small" v-model="item.item"> </el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple" >
<el-form-item
:prop="'options.' + index + '.text'"
:rules="[
{required: true, message: '选项内容不能为空', trigger: 'blur'},
]"
>
<el-input placeholder="请输入选项内容" autocomplete="off" size="small" v-model="item.text"> </el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item>
<i class="el-icon-delete" @click="deleteItem(item, index)"></i>
</el-form-item>
</div>
</el-col>
</el-row>
</div>
</el-form-item>
JS代码:
//新增选项
addItem () {
this.addform.options.push({
item: this.item,
text: this.text
})
},
deleteItem (item, index) {
this.addform.options.splice(index, 1)
},
数据的提交(JSON字符串):
addform: {
options: [{
item: '',
text: '',
}]
},
add: function(){
this.title='';
this.dialogformVisible = true;
this.addform={
options: [{
item: '',
text: '',
}]
};
this.isadd=true;
this.getProjectList();
},
//新增
cancelBtn1: function() {
this.dialogformVisible = false;
this.getProjectList();
},
sureBtn1: function(addform) {
this.$refs[addform].validate((valid) => {
console.log(valid);
if (valid) {
} else {
return false;
}
});
var addform = this.addform;
let data = new FormData();
data.append('options', JSON.stringify(addform.options));
if (this.isadd == true){
axios.post("", //后端提供接口
data,
{
headers: {
'token': sessionStorage.getItem('token'),
'Content-type': 'Content-Type: application/json'
},
}).then((response) => {
if (response.data.code == 200) {
this.$message({ message: response.data.message, duration: 3000, type: 'success' });
this.dialogformkVisible = false;
this.getProjectList();
} else {
this.$message({ message: response.data.message, duration: 2000, type: 'warning' });
}
}).catch(function (error) {
console.log(error)
});
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)