vue成绩排名和筛选

用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>