vue实现table评分表

最新推荐文章于 2024-09-26 18:47:32 发布
八佾舞于庭
最新推荐文章于 2024-09-26 18:47:32 发布
阅读量2.1k
点赞数 1
分类专栏： vue vuex vue-router 文章标签： vue table
本文链接：https://blog.csdn.net/D_claus/article/details/83182937
版权
vue vuex vue-router 专栏收录该内容
29 篇文章 1 订阅
订阅专栏
<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>