vue新增删除内容排序问题解决处理

本次答题选项的删除添加是个人最初比较头疼的地方。比如ABCD四个选项，删除c选项后，点击【新增答题类型】选项按钮，则默认创建是E选项。再或者就是ABCD四个选项位置删除任意一个后，顺序被打乱等，最后解决了，就是多写好几行代码，有点繁琐。

1.点击【新增答题类型】，创建答题选项，此处答题选项个数做了限制，不能超过8个。
2.根据正确答案选项个数决定该道题是否为多选题，若正确答案只有一个即为单选题，否则是多选题
3.可以根据需要删除对应的答题选项，添加新答题类型
在这里插入图片描述
在这里插入图片描述

<template><div class="addquestion"><div class="question-title"><span>{{title}}</span><span class="back" style="font-size: 18px;" @click="back()">返回</span></div><div class="question_body"><el-form:model="dynamicValidateForm"ref="dynamicValidateForm"label-width="100px"class="demo-dynamic"><el-form-itemprop="content"label="题目内容":rules="[{ required: true, message: '请输入题目内容', trigger: 'blur' }]"><span v-if="keyword=='show'">{{dynamicValidateForm.content}}</span><el-input type="textarea" v-if="keyword!='show'" v-model="dynamicValidateForm.content"></el-input></el-form-item><div class="domains_fileds"><div class="domain_title"><span>答题选项：</span><el-button@click="addDomain"v-if="keyword!='show'"style="background:#409EFF;color:white">新增答题类型</el-button></div><el-form-itemv-for="(domain,index) in dynamicValidateForm.domains":label="domain.id":key="domain.id":prop="'domains.' + index + '.value'":rules="{required: true, message: '答题选项不能为空', trigger: 'blur'}"><el-input v-model="domain.value" v-if="keyword!='show'"></el-input><span v-if="keyword=='show'">{{domain.value}}</span><spanclass="linkDel"v-if="keyword!='show'"@click.prevent="removeDomain(domain,index)">删除</span></el-form-item></div><el-form-itemlabel="正确答案"prop="answer_right":rules="{required: true, message: '正确答案不能为空', trigger: 'blur'}"><span v-if="keyword=='show'">{{dynamicValidateForm.answer_right.toString()}}</span><el-selectv-if="keyword!='show'"v-model="dynamicValidateForm.answer_right"multipleplaceholder="请选择正确答案"><el-optionv-for="item in dynamicValidateForm.domains ":key="item.id":label="item.id":value="item.id"></el-option></el-select></el-form-item><el-form-itemprop="answer_parse"label="答案解析":rules="[{ required: true, message: '请输入答案解析', trigger: 'blur' }]"><span v-if="keyword=='show'">{{dynamicValidateForm.answer_parse}}</span><el-inputv-if="keyword!='show'"type="textarea"v-model="dynamicValidateForm.answer_parse"></el-input></el-form-item><el-form-item v-if="keyword!='show'"><el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button><el-button @click="resetForm('dynamicValidateForm')">重置</el-button></el-form-item></el-form></div></div>
</template><script>
import { Message } from "element-ui";
import {addQuestion,findByIdQuestion,randomQuestion,deleteQuestion,getQuestionList
} from "../../api/api";export default {data() {return {alpha: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N"],title: "添加题目",keyword: "add",domainsSum: 0,removeList: [],dynamicValidateForm: {type: "",domains: [{value: "",id: "A"// key: Date.now()}],content: "",answer_parse: "",answer_right: ""}};},methods: {submitForm(formName) {if (this.dynamicValidateForm.domains.length <= 1) {Message.info("答题选项至少要两个才行");return;}this.$refs[formName].validate(valid => {if (valid) {let tempdata = [];this.dynamicValidateForm.domains.map(res => {tempdata.push(res.id + ":" + res.value);});let data = {type:this.dynamicValidateForm.answer_right.length > 1? "多选题": "单选题",content: this.dynamicValidateForm.content,answer_options: tempdata,answer_right: this.dynamicValidateForm.answer_right,answer_parse: this.dynamicValidateForm.answer_parse};if (this.$route.query.paramId) {data.question_id = this.$route.query.paramId;}addQuestion(data).then(res => {if (res.ret == "OK") {Message.info("添加成功");} else {Message.info("添加失败");}this.$router.push({ path: "answer" });});} else {return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},removeDomain(item, index) {this.removeList.push(index);var index = this.dynamicValidateForm.domains.indexOf(item);if (index !== -1) {this.dynamicValidateForm.domains.splice(index, 1);}if (this.dynamicValidateForm.answer_right.length > 0) {this.dynamicValidateForm.answer_right.forEach((res, index) => {if (res == item.id) {this.dynamicValidateForm.answer_right.splice(index, 1);}});}},getArrayIndex(arr, obj) {var i = arr.length;while (i--) {if (arr[i] === obj) {return i;}}return -1;},/*** 去除数组中arr1及arr2中数组不同的数* let aa = ["a", "b","k", "c", "d"];* let bb = ["e", "f","g", "c", "d"];* let kk = getArrDifference(aa, bb);* console.log(kk)* console.log(aa.indexOf("k"))//2  获取数组下标*  打印结果kk: ["a", "b", "k", "c", "d", "e", "f", "g", "c", "d"]*/getArrDifference(arr1, arr2) {return arr1.concat(arr2).filter(function(v, i, arr) {return arr.indexOf(v) === arr.lastIndexOf(v);});},/*** 获取到a,b两个数组中的交集部分* let aa = ["a", "b","k", "c", "d"];* let bb = ["e", "f","g", "c", "d"];* 交集cc:[ "c", "d"];**/array_intersection(a, b) {// 交集var result = [];for (var i = 0; i < b.length; i++) {var temp = b[i];for (var j = 0; j < a.length; j++) {if (temp === a[j]) {result.push(temp);break;}}}return result;},/*** 本地解题思路* 涉及splice，slice,filter,*/addDomain() {let temAlpha = [];if (this.dynamicValidateForm.domains.length > 8) {Message.info("抱歉，答题选项已经上限了");return;}let domainObj = []; //添加的答题选项的abc值保存let domainLen = this.dynamicValidateForm.domains.length; //答题选项长度获取let alphaObj = this.alpha.slice(0, domainLen); //截取alpha字符串长度作为数组this.dynamicValidateForm.domains.map(res => {domainObj.push(res.id);});let unqualList = this.getArrDifference(alphaObj, domainObj); //获取字符串中不相等的内容if (unqualList.length > 0) {let interList = this.array_intersection(unqualList, alphaObj); //交集的数组let alphaIndex = alphaObj.indexOf(interList[0]);this.dynamicValidateForm.domains.splice(alphaIndex, 0, {value: "",id: this.alpha[alphaIndex]});} else {this.dynamicValidateForm.domains.push({value: "",id: this.alpha[this.dynamicValidateForm.domains.length]});}},back() {this.$router.push({ path: "answer" });},getQuestion(id) {this.dynamicValidateForm.domains = [];findByIdQuestion(id).then(res => {if (res.ret == "OK") {this.dynamicValidateForm.content = res.content.content;this.dynamicValidateForm.answer_parse = res.content.answer_parse;this.dynamicValidateForm.type = res.content.type;this.dynamicValidateForm.answer_right = res.content.answer_right;this.domainsSum = res.content.answer_options.length;res.content.answer_options.forEach((item, index) => {this.dynamicValidateForm.domains.push({value: item.substring(2),id: this.alpha[index]});});}});}},activated() {if (this.$route.query.paramId) {let paramId = this.$route.query.paramId;this.keyword = this.$route.query.keyword;this.title =this.keyword == "edit"? "编辑题目": this.keyword == "show"? "查看题目": "添加题目";this.domainsSum = this.keyword == "edit" ? 0 : 0;this.getQuestion(paramId);} else {this.dynamicValidateForm = {type: "",domains: [{value: "",id: "A"}],content: "",answer_parse: "",answer_right: ""};}},deactivated() {this.keyword = "add";}
};
</script>
<style lang="scss" scoped>
.addquestion {.domain_title {margin: 10px;justify-content: space-between;display: flex;span {color: #606266;font-size: 14px;align-items: center;display: flex;}el-button {background: #3a8ee6;}}.linkDel {color: #3a8ee6;width: 70px;text-align: center;}/deep/ .el-form-item__content {display: flex;}form {width: 520px;}.question-title {font-size: 22px;color: #88909c;padding: 20px;display: flex;justify-content: space-between;}
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/27925.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【状态估计】基于UKF法、AUKF法的电力系统三相状态估计研究（Matlab代码实现）

【状态估计】基于UKF法、AUKF法的电力系统三相状态估计研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
【项目 进程2】2.3 进程创建 2.4父子进程虚拟地址空间 2.5GDB多进程调试

【项目 进程2】2.3 进程创建 2.4父子进程虚拟地址空间 2.5GDB多进程调试

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 2.3 进程创建2.4 父子进程虚拟地址空间父子进程之间的关系&#xff1a; 2.5 GDB多进程调试 2.3 进程创建 系统允许一个进程创建新进程&#xff0c;新进程即为子进程…
阅读更多...
Vue2 ➔ Vue3 都做了哪些改变？

Vue2 ➔ Vue3 都做了哪些改变？

不是吧&#xff0c;兄弟&#xff0c;Vue3 都出来多久了&#xff0c;你还对这个感兴趣&#xff0c;说&#xff01;是不是没好好卷&#xff1f;&#x1f60f; 俺也一样 &#x1f602;&#xff0c;Vue3 出来之后只是简单了解了一下&#xff0c;然后还是转头一直在写 Vue2。当然&a…
阅读更多...
基于weka手工实现多层感知机(BPNet)

基于weka手工实现多层感知机(BPNet)

一、BP网络 1.1 单层感知机 单层感知机&#xff0c;就是只有一层神经元&#xff0c;它的模型结构如下1&#xff1a; 对于权重 w w w的更新&#xff0c;我们采用如下公式&#xff1a; w i w i Δ w i Δ w i η ( y − y ^ ) x i (1) w_iw_i\Delta w_i \\ \Delta w_i\eta(y…
阅读更多...
Maven —— 项目管理工具

Maven —— 项目管理工具

前言 在这篇文章中&#xff0c;荔枝会介绍如何在项目工程中借助Maven的力量来开发&#xff0c;主要涉及Maven的下载安装、环境变量的配置、IDEA中的Maven的路径配置和信息修改以及通过Maven来快速构建项目。希望能对需要配置的小伙伴们有帮助哈哈哈哈~~~ 文章目录 前言 一、初…
阅读更多...
设计模式-组合模式在Java中的使用示例-杀毒软件针对文件和文件夹进行杀毒

设计模式-组合模式在Java中的使用示例-杀毒软件针对文件和文件夹进行杀毒

场景 组合模式 组合模式(Composite Pattern)&#xff1a; 组合多个对象形成树形结构以表示具有“整体—部分”关系的层次结构。 组合模式对单个对象&#xff08;即叶子对象&#xff09;和组合对象&#xff08;即容器对象&#xff09;的使用具有一致性&#xff0c; 组合模式…
阅读更多...
排序算法之冒泡排序详解-python版

排序算法之冒泡排序详解-python版

冒泡排序&#xff1a;通过比较2个相邻元素之间的大小&#xff0c;交换元素顺序&#xff0c;从而达到排序目的。 从百度百科摘抄下来的冒泡排序原理如下&#xff1a; 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换他们两个。 对每一对相邻元素做同样的工作&#xf…
阅读更多...
elementUI 非表单格式的校验

elementUI 非表单格式的校验

在普通表单中对输入框、选择框都有校验案例。 但是在自定义非空中如何进行校验官网并没有说明 关键代码 clearValidate 方法清除校验 this.$refs.formValue.clearValidate(signinimg) 使用案例 <template><div class"stylebg"><Tabs icons"el-…
阅读更多...
MySQL原理探索——31 误删数据后除了跑路，还能怎么办

MySQL原理探索——31 误删数据后除了跑路，还能怎么办

在前面几篇文章中&#xff0c;介绍了 MySQL 的高可用架构。当然&#xff0c;传统的高可用架构是不能预防误删数据的&#xff0c;因为主库的一个 drop table 命令&#xff0c;会通过 binlog 传给所有从库和级联从库&#xff0c;进而导致整个集群的实例都会执行这个命令。 虽然我…
阅读更多...
blender 阵列修改器

blender 阵列修改器

效果 tab 键进入编辑模式&#xff0c;全选制作好的模型&#xff0c;gx 移动模型置于游标原点&#xff1b; 阵列修改器&#xff1a; 相对偏移&#xff1a;以物体的长宽高为比例&#xff0c;调整x y z 的数值&#xff0c;在 x y z 方向上做不同比例的偏移&#xff1b; 恒定偏移…
阅读更多...
C#安装.Net平台科学计算库Math.Net Numerics

C#安装.Net平台科学计算库Math.Net Numerics

工作的时候需要使用到C#的Math.Net库来进行计算。 Math.Net库涵盖的主题包括特殊函数&#xff0c;线性代数&#xff0c;概率模型&#xff0c;随机数&#xff0c;插值&#xff0c;积分&#xff0c;回归&#xff0c;优化问题等。 这里记录一下&#xff0c;安装Math.Net库的过程…
阅读更多...
Linux 部署Vue+Spring Boot项目

Linux 部署Vue+Spring Boot项目

部署Vue Spring Boot项目 安装redis wget http://download.redis.io/releases/redis-4.0.8.tar.gz tar -zxvf redis-4.0.8.tar.gz yum install gcc-c make make install如果出现下面的问题&#xff1a; yum install tcl make testredis-server myconifg/redis.conf输入客户端…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023