vue+elementui实现问卷调查配置可单选、多选、解答

效果：

<template>
<div><el-form :inline="true" :model="form" :rules="rules" ref="ruleForm">
<el-tabs type="border-card" v-model="cardType"><el-tab-pane name="1" label="问卷配置"><el-form-item label=" "><divclass="tiSty"v-for="(item, index) in diagnosticContent":key="index"><divstyle="padding: 21px;border-radius: 10px;padding-right: 20px;border: 1px solid #ccc;width: 100%;
"><label>题目{{ index + 1 }}:</label><el-inputclass="labelWith"v-model="item.question"placeholder="请输入标题"></el-input><label style="margin-left: 159PX">题目类型:</label><el-select@change="changeSelect($event, index)"class="labelWith"clearablev-model="item.type"placeholder="题目类型:"><el-optionv-for="(item, index) in infoTypeList":key="index":label="item.label":value="item.value"></el-option> </el-select><br /><!-- 解答题 --><!-- 单选 --><div v-if="item.type === 0"><div class="checkbox"><divv-for="(val, inde) in item.delinProblemsAnswer":key="inde"style="margin-top: 10px"><label style="">选项{{ inde + 1 }}:</label><el-inputclass="labelWith"v-model="val.answer"autocomplete="off"placeholder="请输入"></el-input><label style="">分数:</label><el-input-numberv-model="val.score"@change="handleChange"controls-position="right":min="1":max="10000"style="width: 85px;"@input="forceInteger(val, inde, index, $event)"placeholder="分数"></el-input-number><div style="display:inline-block;width:20px"><iv-if="inde != 0"class="el-icon-delete"@click="delItem(1, index, inde)"></i></div></div></div><div style="margin-top: 10px"><el-button@click="radioaddInfo(item, index)"style="margin-top: 10px; position: relative; left: 10px"type="primary"icon="el-icon-plus"></el-button></div></div><!-- 多选 --><div v-else-if="item.type === 1" style="margin-top: 10px"><div class="checkbox"><divstyle="margin: 10px 0"v-for="(val1, inde1) in item.delinProblemsAnswer":key="inde1"><label style="">选项{{ inde1 + 1 }}:</label><el-inputclass="labelWith"v-model="val1.answer"autocomplete="off"placeholder="请输入"></el-input><label style="">分数:</label><el-input-numberv-model="val1.score"@change="handleChange"controls-position="right":min="0":max="10"style="width: 85px;"placeholder="分数"@input="forceInteger(val1, inde1, index, $event)"></el-input-number><div style="display:inline-block;width:20px"><!-- inde1!=0 --><iv-if="inde1 != 0"class="el-icon-delete"@click="delItem(2, index, inde1)"></i></div></div></div><div><el-button@click="addInfoAns(index)"style="margin-top: 10px; position: relative; left: 10px"type="primary"icon="el-icon-plus"></el-button></div></div></div><!-- 删除 --><divstyle="display: flex;justify-content: center;align-items: center;width: 100px;
"><!-- index != 0  --><div><el-buttonv-if="diagnosticContent.length > 1"@click="delInfo(item, index)"style=""type="danger"icon="el-icon-delete"circle></el-button></div></div></div></el-form-item><!-- 添加 --><el-form-itemlabel=" "label-width="80px"style="margin-top: -29px"><div style="width: 800px; padding-left: 70px"><el-button@click="addInfo"style=""type="primary"icon="el-icon-plus"></el-button></div></el-form-item></el-tab-pane></el-tabs></el-form>
</div>
</template>
<script>
export default {components: { uploadImg },data() {return {infoTypeList: [{label: "单选",value: 0}{label: "多选题",value: 1},{label: "简答",value: 2}],diagnosticContent: [{question: "",type: "",delinProblemsAnswer: [{answer: "标题",score: 1 //分数}]}],}},methods:{//添加addInfoAns(index) {let obj = {answer: "",score: 1 //分数};this.diagnosticContent[index].delinProblemsAnswer.push(obj);// console.log("总的1111", this.form);},//删除题目delInfo(val, inde) {this.diagnosticContent.splice(inde, 1);},//单选新增radioaddInfo(item, index) {let obj = {answer: "",score: 1 //分数};this.diagnosticContent[index].delinProblemsAnswer.push(obj);},//删除项目delItem(type, index, inde) {this.diagnosticContent[index].delinProblemsAnswer.splice(inde, 1);},//分数验证  只能输入正整数// 强制整数转换forceInteger(item, inde1, index, e) {if (e === null || e === "") return;// 立即更新模型值（注意这里要用$nextTick确保DOM更新）this.$nextTick(() => {this.diagnosticContent[index].delinProblemsAnswer[inde1].score = Math.max(1, Math.min(10, Math.abs(Math.round(e))));});},handleChange(value) {console.log(value);},//题目类型更换changeSelect(e, index) {console.log(e);this.diagnosticContent[index].delinProblemsAnswer = [{answer: "",score: 1 //分数, programmeList: []}];},}}</script><style lang="scss" scoped="scoped">
.labelWith {width: 200px;
}
.tiSty {margin: 10px 9px;position: relative;bottom: 10px;padding-bottom: 10px;width: 955px;display: flex;justify-content: space-between;
}
.checkbox {display: flex;justify-content: space-between;align-content: center;flex-wrap: wrap;// border: 1px solid;
}
.checkbox_item {position: relative;right: 10px;
}
.titleSty {font-weight: bold;width: 88%;text-align: center;
}
.titleSty1 {width: 960px;font-weight: bold;text-align: center;
}
.resultSty {width: 97%;display: flex;justify-content: space-around;align-items: center;// border: 1px solid red;// display: flex;// justify-content: space-around;// align-items: center;
}
.resultSty_item {border-radius: 10px;display: flex;flex-wrap: wrap; /* 允许换行 */justify-content: flex-start;align-items: center;display: flex;border: 1px solid #ccc;box-sizing: border-box;margin-top: 14px;padding-left: 20px;padding-bottom: 10px;// gap: 10px; /* 现代浏览器间隙 */
}
.resultSty_item_title {font-weight: bold;text-align: center;box-sizing: border-box;padding: 5px 0;color: red;
}
.resultSty_item_content {line-height: 50px;// text-align: center;
}
.items {flex: 0 0 calc(50% - 10px); /* 关键：固定宽度且不允许伸缩 */margin: 5px; /* 项间距 */box-sizing: border-box; /* 防止边框影响计算 */text-align: left;
}
</style>