<template>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
subject: "", // 名称
score: 0, // 价格
list: JSON.parse(localStorage.getItem("plist")) || [],
};
},
methods: {
//新增
addFn(){
//判断为空不可提交
if(this.subject.trim().length == 0 || this.score == 0){
alert("不可为空！");
return;
}
this.list.push({
id : this.list.length == 0 ? 100 : this.list[this.list.length -1].id +1,
subject:this.subject,
score:this.score,
time:new Date(),
isdone:false
})
this.subject="",
this.score=0;
},
//删除
deleteFn(id){
let index = this.list.findIndex(obj => obj.id == id)
this.list.splice(index,1)
},
btn(){
return this.list.forEach(obj => obj.isdone = ! obj.isdone);
}
},
//过滤器
filters: {
formatDate(val){
return moment(val).format("YYYY-MM-DD")
}
},
watch: {
list:{
handler(oldval,newval){
localStorage.setItem("plist",JSON.stringify(this.list))
},
deep:true
}
},
//计算
computed: {
allscore(){
return this.list.reduce((sum,obj) => sum += obj.score,0)
},
svgscore(){
return (this.allscore/this.list.length).toFixed(2)
},
isAll:{
get(){
return this.list.every(obj => obj.isdone==true)&&this.list.length!=0
},
set(checked){
return this.list.forEach(obj => obj.isdone=checked);
}
}
}
};
</script>
<style >
.red{
color: red;
}
</style>
<div class="container">
<!-- 顶部框模块 -->
<div class="form-group">
<div class="input-group">
<h4>成绩管理</h4>
</div>
</div>
<!-- 数据表格 -->
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>
<span>全选:</span>
<input type="checkbox" v-model="isAll"/>
<button @click="btn">反选</button>
</th>
<th>编号</th>
<th>科目</th>
<th>成绩</th>
<th>考试时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="obj in list" :key="obj.id">
<td> <input type="checkbox" v-model="obj.isdone"/></td>
<td>{{obj.id}}</td>
<td>{{obj.subject}}</td>
<!-- 如果成绩低于60，就有red这个类 -->
<td :class="{red:obj.score > 60}">{{obj.score}}</td>
<td>{{obj.time | formatDate}}</td>
<td><a href="#" @click="deleteFn(obj.id)">删除</a></td>
</tr>
</tbody>
<tfoot v-if="list.length === 0">
<tr>
<td colspan="5" style="text-align: center">暂无数据</td>
</tr>
</tfoot>
<tbody v-if="list.length != 0">
<td>统计</td>
<td>总分：{{allscore}}</td>
<td>平均分：{{svgscore}}</td>
</tbody>
</table>
<!-- 添加成绩 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="科目"
v-model="subject"
/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="成绩"
v-model.number="score"
/>
</div>
</div>
<!-- 阻止表单提交 -->
<button class="btn btn-primary" @click.prevent="addFn">添加成绩</button>
</form>
</div>
本文转载自: https://blog.csdn.net/m0_66717003/article/details/127535866
版权归原作者 爱洗澡的喜羊羊 所有， 如有侵权，请联系我们删除。
版权归原作者 爱洗澡的喜羊羊 所有， 如有侵权，请联系我们删除。