vue实现table评分表

<template><div class="ss_scoreTable"><table border="1" cellpadding="0" cellspacing="0"><!--caption定义的是表格的标题--><caption><h4><b>挖掘机实践操作评分表</b></h4></caption><!--col可以定义单个列的属性信息，colgroup可以定义一个或多个列的属性--><!--<col style="background-color:yellow"/><col style="width:500px"/>--><!--<colgroup><col style=""/><col style="" span="2"/></colgroup>--><!--thead表示表格的表头--><thead style="text-align: center;"><tr><th colspan="6">各项考试方式及其评分标准</th></tr><tr><th style="padding: 0;">项目</th><th style="padding: 0;">序号</th><th style="padding: 0;">考试内容</th><th style="padding: 0;">评分标准</th><th style="padding: 0;">完成情况</th><th style="padding: 0;">打分</th></tr></thead><tbody style="text-align:center"><tr><td rowspan="5">车辆启动</td><td>1</td><td>启动前的检查</td><td style="padding: 0;font-size: 0.5rem;">停车后未在怠速下运转散热冷却，高温下直接熄火扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分"v-model="text1" @keyup="countScore"/></td></tr><tr><!--<td></td>--><td>2</td><td>上下车辆</td><td style="padding: 0;font-size: 0.5rem;">"三油一水"检查不到位，扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分" v-model="text2" @keyup="countScore"/></td></tr><tr><!--<td></td>--><td>3</td><td >启动发动机</td><td style="padding: 0;font-size: 0.5rem;">出现有人在车辆作业时上、下车辆，手里提着工具时上、下车辆，跳上、跳下车辆，把任意%20控制杆当扶手使用现象，扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分" v-model="text3" @keyup="countScore"/></td></tr><tr><!--<td></td>--><td>4</td><td>启动后检查</td><td style="padding: 0;font-size: 0.5rem;">出现起动发动机时未关好驾驶室门，或站在履带上、地面上起动车辆，连续启动车辆每次起%20动时间较长，超过10秒等现象，扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分"  v-model="text4" @keyup="countScore"/></td></tr><tr><!--<td></td>--><td>5</td><td>熄火</td><td style="padding: 0;font-size: 0.5rem;">未对车辆进行预热（5分钟左右），或未对仪表、油泵等正常性检查扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分" v-model="text5" @keyup="countScore" /></td></tr><tr><td rowspan="5">车辆行走</td><td>1</td><td>起步</td><td style="padding: 0;font-size: 0.5rem;">停车后未在怠速下运转散热冷却，高温下直接熄火扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分"v-model="text6" @keyup="countScore"/></td></tr><tr><!--<td></td>--><td>2</td><td>行走</td><td style="padding: 0;font-size: 0.5rem;">"三油一水"检查不到位，扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分" v-model="text7" @keyup="countScore"/></td></tr><tr><!--<td></td>--><td>3</td><td >上下坡</td><td style="padding: 0;font-size: 0.5rem;">出现有人在车辆作业时上、下车辆，手里提着工具时上、下车辆，跳上、跳下车辆，把任意%20控制杆当扶手使用现象，扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分" v-model="text8" @keyup="countScore"/></td></tr><tr><!--<td></td>--><td>4</td><td>倒车</td><td style="padding: 0;font-size: 0.5rem;">出现起动发动机时未关好驾驶室门，或站在履带上、地面上起动车辆，连续启动车辆每次起%20动时间较长，超过10秒等现象，扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;" placeholder="请输入入具体完成情况"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分"  v-model="text9" @keyup="countScore"/></td></tr><!--<tr><td>5</td><td>熄火</td><td style="padding: 0;font-size: 0.5rem;">未对车辆进行预热（5分钟左右），或未对仪表、油泵等正常性检查扣5分</td><td><textarea name="" rows="5" cols="3" style="border: none;display: table;width: 100%;height: 100%;"></textarea></td><td><input type="number" placeholder="请输入分值,不大于40分" v-model="text5" @keyup="countScore" /></td></tr>--></tbody><tfoot><!--colspan定义三列合并,另rowspan可定义行合并数， text-align定义内容在右侧显示--><tr><td colspan="3" style="text-align:right">总分值：</td><td colspan="3"style="text-align:left;padding: 0.1rem;"><input type="text" readonly="readonly"style="display: inline-block;width: 60%;height: 80%;font-size: 0.8rem;" v-model="totalScore"/></td></tr></tfoot>                </table></div>
</template><script>export default {data(){return {IdStr:"",text1:"",text2:"",text3:"",text4:"",text5:"",text6:"",text7:"",text8:"",text9:"",totalScore:"",obj:{}}},mounted(){},created(){this.IdStr=this.$route.params.id;
//          console.log(this.IdStr);},methods:{getSingleScoreTab(){let _this=this;
//              console.log(this.IdStr);this.$request.getAjax(url,params,function(res){console.log(res);})},countScore(){let countStr=0;if(parseInt(this.text1)>40)this.text1=40;if(parseInt(this.text2)>40)this.text2=40;if(parseInt(this.text3)>40)this.text3=40;if(parseInt(this.text4)>40)this.text4=40;if(parseInt(this.text5)>40)this.text5=40;if(parseInt(this.text6)>40)this.text6=40;if(parseInt(this.text7)>40)this.text7=40;if(parseInt(this.text8)>40)this.text8=40;if(parseInt(this.text9)>40)this.text9=40;this.obj.text1=this.text1;this.obj.text2=this.text2;this.obj.text3=this.text3;this.obj.text4=this.text4;this.obj.text5=this.text5;this.obj.text6=this.text6;this.obj.text7=this.text7;this.obj.text8=this.text8;this.obj.text9=this.text9;for (var k in this.obj){if(this.obj[k]==""){delete this.obj[k];}}console.log(this.obj);for (var j in this.obj){countStr+=parseInt(this.obj[j]);console.log(countStr);}this.totalScore=countStr;console.log(this.totalScore);},scoreDataSub(){let params={};let url='';this.$request.postAjax(url,params,function(res){console.log(res);})}}}
</script><style scoped="scoped">/*表格样式开始*/.ss_scoreTable table {width: 100%;height: 100%;}.ss_scoreTable tbody td {font-size: 0.5rem;}.ss_scoreTable thead th {font-size: 0.8rem;}.ss_scoreTable tbody input {border: 1px solid lightgray;display: inline-block;font-size: 0.6rem;height: 0.6rem;padding-left: 0.3rem;}.ss_scoreTable tfoot input {padding-left:0.4rem ;}
</style>

vue实现table评分表相关推荐

table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
element 表格评分表（合并单元格，单选框按钮选分，计算表格总分）
文件下载 >>https://download.csdn.net/download/jemycc/12837044 突然发现 vxe 会更方便 vxe官网: https://xuliang ...
使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
QPW 企业维度评分表（tf_company_dimesion）
企业维度评分表用于保存企业每个维度的评分数据,目前企业有5个点评维度,用户可以对这5个维度分别点评,所以企业目前会有5个维度的评分,也就是说企业的每个维度有各自分值.好评率 CREATE TABLE ...
vue js table colspan rowspan
需求,要写一个菜单权限表.需要做到单元格合并,本来用的antd-vue的表格,然后构造customRender,总感觉有点本末倒置,其实自己实现,更快,而且想改哪里,改哪里.下面是写这个功能前的测试d ...
html表格上下移动,Vue实现table上下移动功能示例
本文实例讲述了Vue实现table上下移动功能.分享给大家供大家参考,具体如下: 结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容.列内容.以及此行索引值, ...
软件项目第一次Sprint评分表
软件项目第一次Sprint评分表组名:JYJe族姓名:陈杰.周雪莹.孟祥娟 1.本阶段目标是否明确? 组名分数原因 9 ...
apache评分表的意义_APACHE评分系统及评分表
<APACHE评分系统及评分表>由会员分享,可在线阅读,更多相关<APACHE评分系统及评分表(2页珍藏版)>请在人人文库网上搜索. 1.APACHE评分系统急性生理学及慢性健 ...
TP5.1查询用Db('不含表前缀')/Db::name('不含表前缀')/Db::table('含表前缀')返回数组；model()返回对象
TP5.1查询用Db(('不含表前缀')/Db::name('不含表前缀')/Db::table('含表前缀')返回数组:model()返回对象 all():可直接传数组查询 select():传数组 ...

vue实现table评分表

vue实现table评分表相关推荐

最新文章

热门文章