<template>
<div class="radio">
<el-form :model="formline" ref="formline" :rules="rules">
<div v-for="(item, index) in formline.lists" :key="index">
<el-form-item
label="选项A"
:rules="[{required: true, message: '请输入', trigger: 'blur'}]"
:prop="'lists.' + index +'.name'"
>
<el-input v-model="item.name"></el-input>
<el-button
type="danger"
@click="deleteTool(item.index, formline.lists)">
<i class="el-icon-remove-outline"></i>
</el-button>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-button type="primary" @click="addTool(formline.lists)">添加</el-button>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm('formline')">立即创建</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
radio: '',
formline: {
lists:[
{
index: 0,
name: '',
}
],
},
rules:{
name:[{required: true, message: '请输入', trigger: 'blur' }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
addTool(arr){
arr.push({
index: arr.length,
step:'',
step_pic:''
})
this.formline.lists = this.formline.lists;
},
deleteTool(index, arr){
arr.splice(index, 1)
for (let i in arr) {
arr[i].index = i
}
}
}
}
</script>
element ui el-form-item动态渲染添加验证
最新推荐文章于 2024-05-16 03:08:46 发布