欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于vue与element实现创建试卷相关功能(实例代码)

程序员文章站 2022-04-09 23:44:22
由于最近在一个项目中需要实现创建试卷与预览试卷的功能,所以就自己动手写了一个,效果还不错,目前项目已经交付使用,今天就先和大家分享一下创建试卷。创建试卷先放一下效果图首先是试卷的相关设置考试对象是通过...

由于最近在一个项目中需要实现创建试卷与预览试卷的功能,所以就自己动手写了一个,效果还不错,目前项目已经交付使用,今天就先和大家分享一下创建试卷。

创建试卷

先放一下效果图

基于vue与element实现创建试卷相关功能(实例代码)

首先是试卷的相关设置

考试对象是通过接口返回的数据

基于vue与element实现创建试卷相关功能(实例代码)

需要定义的data数据

获取考试对象列表

截至时间使用的是element时间日期选择器

基于vue与element实现创建试卷相关功能(实例代码)

 

然后是添加试题
试题类型的相关数据也是通过接口返回的

基于vue与element实现创建试卷相关功能(实例代码)
data数据

获取试题类型

对于添加的试题模板则是单独创建了一个question.vue
这里由于其他布局方法一直不太理想,所以采用了栅格布局,效果还算可以

 

然后是删除试题

 

最后提交方法中进行数据验证
这个在之前一篇博客中简单介绍过,感兴趣的朋友可以自行前去了解
vue关于element对表单的校验

最最后把create.vue的源码分享给大家方便大家进行参考,如有更好的建议也请大家不吝赐教

到此这篇关于基于vue与element实现创建试卷相关功能的文章就介绍到这了,更多相关vue与element创建试卷功能内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!