vue2 + element-ui 实现试卷在线打分 上传的页面（移动端）

最近两个做了一个展示试卷信息，选项等,并在前端页面打分 把分数与选项传进数据库，并且可以点击回显。

页面功能：我的试卷是代表着用户已做完的试卷，点击会弹出组件展示已做完试卷的信息（测试数据就放了一个，他里面还集成了下拉加载）

在首页点击继续考试或者开始考试弹出做题组件

接下来上代码

(后台返回的测试数据)

首页html代码

script部分

需要注意的地方因为有个业务功能，需要保存试题，所以如果点击开始考试但是没有做完就得变成开始考试且继续做那张试卷

然后代码中有很多在处理格式，因为接口是我们公司低代码平台生成的，所以格式返回的都是json字符串，所以多了很多处理格式的地方，包括提交post接口也要转化成json字符串，所以很麻烦，不过你们应该可以跟后端沟通

css部分

examination组件（开始/继续考试）

completedItem组件（试卷详情页面）

这个页面难点我总结了一下

1. 需要转化格式接受展示和上传提交都要转化格式（个人接口需求问题）

2. element-ui多选框单选框的v-model值需要进行处理，组合多选框的值需要是个数组

3. 提交表单答案对比其实只是第一感觉难，实际几行代码就解决了，单选题对比相等就相加分值，多选题数组排序方法后再转化为字符串对比是否相等

优点：因为我这个排版都是比较灵活的 后台想传多少选项就可以显示多少选项 且优势数据都在前端处理过了 可以省去后台很多功夫 他们只需要接收数据就行了。

因为我端口是用低代码生成的 需要处理数据 复用性没那么高 仅供阅读复制修改或者提供思路 如果想直接不用脑子复制粘贴的不太适合

然后需求是一步一步提出的，比如点击详情是做完后修改的，所以封装方面做的没那么优美哈。