vue逻辑处理，数据处理

Question

问题如下：

1. defaultscoreRankList是默认值，是5个固定的值，顺序分别是：满分、优秀、良好、及格、低分
2. 如果请求回来的scoreRankList有值时，点击删除，不顺延（比如：创建了三个（满分、优秀、良好），但是删除了满分，那么页面上只展示优
   秀、良好），此时再新增时顺序是先添加及格、低分、然后才添加满分。
3. 如果请求回来的没有值，那么每次点击添加的时候，依次添加满分、优秀、良好、及格、低分，如果添加了几个又删除，那么又重复第2条的规
   则，
4. 如果是5个，就不能再新增了。如果删除了，那么再点击新增，之前删除的是按照删除的顺序依次添加
5. 不能重复添加，只能添加这5个

<template>
  <div class="home">
    <div v-for="item in scoreRankList" :key="item.ruleLevel">
      <div class="abc">
        <span>{{ item.ruleLevel }}</span>
        <span class="dele" @click="deleteData(item.ruleLevel)">删除</span>
      </div>
    </div>
    <span class="addData" @click="addData()">添加</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // 默认值
      defaultscoreRankList: [
        {
          ruleLevel: "满分",
          scoreBefore: 100,
          scoreEnd: 90,
        },
        {
          ruleLevel: "优秀",
          scoreBefore: 89,
          scoreEnd: 80,
        },
        {
          ruleLevel: "良好",
          scoreBefore: 79,
          scoreEnd: 70,
        },
        {
          ruleLevel: "及格",
          scoreBefore: 69,
          scoreEnd: 60,
        },
        {
          ruleLevel: "低分",
          scoreBefore: 59,
          scoreEnd: 0,
        },
      ],
      // 请求回来的值
      scoreRankList: [
         {
          ruleLevel: "满分",
          scoreBefore: 100,
          scoreEnd: 90,
        },
        {
          ruleLevel: "优秀",
          scoreBefore: 89,
          scoreEnd: 80,
        },
        {
          ruleLevel: "良好",
          scoreBefore: 79,
          scoreEnd: 70,
        },
      ],
    };
  },
  methods: {
    // 删除
    deleteData(i) {
      this.scoreRankList.splice(i, 1);
    },
    // 添加
    addData() {},
  },
};
</script>

<style lang="scss">
.abc {
  margin-bottom: 20px;
}
.dele {
  margin-left: 100px;
  background-color: #ccc;
  color: red;
}
.addData {
  background-color: #ccc;
  color: red;
}
</style>

Answer 1

参考：

<template>
  <div class="home">
    <div v-for="(item, index) in scoreRankList" :key="item.ruleLevel">
      <div class="abc">
        <span>{{ item.ruleLevel }}</span>
        <span class="dele" @click="deleteData(index)">删除</span>
      </div>
    </div>
    <span class="addData" @click="addData()">添加</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // 默认值
      defaultscoreRankList: [
        {
          ruleLevel: "满分",
          scoreBefore: 100,
          scoreEnd: 90,
        },
        {
          ruleLevel: "优秀",
          scoreBefore: 89,
          scoreEnd: 80,
        },
        {
          ruleLevel: "良好",
          scoreBefore: 79,
          scoreEnd: 70,
        },
        {
          ruleLevel: "及格",
          scoreBefore: 69,
          scoreEnd: 60,
        },
        {
          ruleLevel: "低分",
          scoreBefore: 59,
          scoreEnd: 0,
        },
      ],
      // 请求回来的值
      scoreRankList: [
         {
          ruleLevel: "满分",
          scoreBefore: 100,
          scoreEnd: 90,
        },
        {
          ruleLevel: "优秀",
          scoreBefore: 89,
          scoreEnd: 80,
        },
        {
          ruleLevel: "良好",
          scoreBefore: 79,
          scoreEnd: 70,
        },
      ],
    };
  },
  methods: {
    // 删除
    deleteData(index) {
      this.scoreRankList.splice(index, 1);
    },
    // 添加
    addData() {
      const levels = ["满分", "优秀", "良好", "及格", "低分"];
      const usedLevels = this.scoreRankList.map((item) => item.ruleLevel);
      let nextLevel;
      // 如果scoreRankList有值，则顺延规则2
      if (this.scoreRankList.length > 0) {
        if (usedLevels.includes("满分")) {
          // 如果已经有满分，则从优秀开始顺延
          nextLevel = levels[1];
        } else {
          // 如果没有满分，则从满分开始顺延
          nextLevel = levels[0];
        }
      } else {
        // 如果scoreRankList没有值，则依次添加五个规则
        nextLevel = levels[usedLevels.length];
      }
      // 如果已经添加了五个规则，则不能再新增
      if (usedLevels.length === 5) {
        return;
      }
      // 添加规则
      const nextRule = this.defaultscoreRankList.find(
        (item) => item.ruleLevel === nextLevel
      );
      this.scoreRankList.push(nextRule);
    },
  },
};
</script>

<style lang="scss">
.abc {
  margin-bottom: 20px;
}
.dele {
  margin-left: 100px;
  background-color: #ccc;
  color: red;
}
.addData {
  background-color: #ccc;
  color: red;
}
</style>