用table表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分
let scores = [
{name: 'Bob', math: 97, chinese: 89, english: 67},
{name: 'Tom', math: 67, chinese: 52, english: 98},
{name: 'Jerry', math: 72, chinese: 87, english: 89},
{name: 'Ben', math: 92, chinese: 87, english: 59},
{name: 'Chan', math: 47, chinese: 85, english: 92},
];
选出所有科目都及格的学生
排名 姓名 数学 语文 英语 总分
还是采用上方相同数据,采用相同的渲染规则,点击一个按钮,只渲染所有科目都及格的学生
有三个按钮:数学,语文、外语,点击之后实现按照对应学科排序
主要做的思路:修改数据源,通过相关指令将数据显示在页面
关于排名的思路:1.先求总分,给数据源的每一条数据添加一个total字段 2.再根据总分来排序 给排好序的数字再添加一个id字段(排名)
只渲染所有科目都及格的学生 : 思路 使用计算属性
数学,语文、外语排序功能:思路 使用计算属性(传参)
代码如下
<template>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th @click="sortBy('math')">数学</th>
<th @click="sortBy('chinese')">语文</th>
<th @click="sortBy('english')">英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filterScores" :key="item.idx">
<td>{{ item.idx }}</td>
<td>{{ item.name }}</td>
<td>{{ item.math }}</td>
<td>{{ item.chinese }}</td>
<td>{{ item.english }}</td>
<td>{{ item.total }}</td>
</tr>
</tbody>
</table>
<button @click="allpass">选出及格的学生</button>
</div>
</template>
<style lang="less">
</style>
<script>
export default {
data() {
return {
subject: "",
isallpass: false,
scores: [
{ name: "Bob", math: 97, chinese: 89, english: 67 },
{ name: "Tom", math: 67, chinese: 52, english: 98 },
{ name: "Jerry", math: 72, chinese: 87, english: 89 },
{ name: "Ben", math: 92, chinese: 87, english: 59 },
{ name: "Chan", math: 47, chinese: 85, english: 92 },
],
};
},
created() {
this.dealWithScores();
},
methods: {
dealWithScores() {
this.scores.forEach((item) => {
item.total = item.math + item.chinese + item.english;
});
this.scores.sort((item1, item2) => -item1.total + item2.total); //排序
this.scores.forEach((item, idx) => {
item.idx = idx + 1;
});
},
allpass() {
this.isallpass = true;
},
sortBy(subject) {
this.isallpass = false;
this.subject = subject;
},
},
computed: {
filterScores() {
if (this.isallpass) {
return this.scores.filter(
(item) => item.math >= 60 && item.chinese >= 60 && item.english >= 60
);
} else {
if(this.subject){
return this.scores.sort((item1,item2)=>{
return item1[this.subject] - item2[this.subject]
})
}
return this.scores;
}
},
},
};
</script>