<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"><inputtype="text"class="form-control"placeholder="科目"v-model="subject"/></div></div> <div class="form-group"><div class="input-group"><inputtype="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
版权归原作者 爱洗澡的喜羊羊 所有， 如有侵权，请联系我们删除。
版权归原作者 爱洗澡的喜羊羊 所有， 如有侵权，请联系我们删除。