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字段(排名) 只渲染所有科目都及格的学生 ： 思路  使用计算属性 数学，语文、外语排序功能：思路  使用计算属性(传参)

代码如下  

          排名

          姓名

          数学

          语文

          英语

          总分

          {{ item.idx }}

          {{ item.name }}

          {{ item.math }}

          {{ item.chinese }}

          {{ item.english }}

          {{ item.total }}

    选出及格的学生

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;

      }

    },

  },

};