<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" size="small" class="demo-ruleForm" > <el-form-item label="问题" prop="question"> <el-input v-model="ruleForm.question" maxlength="30" clearable placeholder="请输入问题" ></el-input> </el-form-item> <div v-for="(item, index) in ruleForm.items" :key="index"> <el-form-item :label="'选项' + (index + 1)" :prop="`items[${index}].answer`" :rules="{ required: true, message: '请输入答案', trigger: 'blur' }" > <el-input v-model="item.answer" maxlength="30" clearable placeholder="请输入答案" ></el-input> <el-button v-if="index > 0" type="text" @click="deleteItem(index)" size="small" >删除</el-button > </el-form-item> </div> <el-form-item label=""> <el-button :disabled="ruleForm.items.length >= 5" type="text" @click="addItem()" size="small" icon="el-icon-plus" >确认添加</el-button > </el-form-item> </el-form> </div> </template> <script> export default { data() { return { ruleForm: { question: "", items: [ { answer: "", }, ], }, rules: { question: [{ required: true, message: "请输入问题", trigger: "blur" }], }, }; }, created() {}, mounted() {}, methods: { addItem() { if (this.ruleForm.items.length >= 5) return; this.ruleForm.items.push({ answer: "", }); }, deleteItem(index) { this.ruleForm.items.splice(index, 1); }, }, }; </script> <style scoped lang="scss"></style>