vue逻辑处理，数据处理

问题如下：

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>

参考：

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

<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(i) {
      this.scoreRankList.splice(i, 1);
    },
    // 添加
    addData() {
      if(this.scoreRankList.length >= 5){
        return
      }else{
        this.scoreRankList = this.defaultscoreRankList
      }
    },
  },
};
</script>
 
<style lang="scss">
.abc {
  margin-bottom: 20px;
}
.dele {
  display: inline-block;
  margin-left: 100px;
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  padding:9px 15px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.addData {
  display: inline-block;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  font-size: 14px;
  border-radius: 4px;
  padding:9px 15px;
  cursor: pointer;
}
</style>
 

1、先根据返回值筛选出优先添加的数组，和后添加的数组。
2、在点击添加的时候，判断优先添加的数组里面有无数据，如果有数据，则依次添加，添加一个删除一个。
具体实现，你先尝试这实现下，如果遇到问题可随时询问哦

热乎出炉 无懈可击 【狗头】

<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(item, index)">删除</span>
      </div>
    </div>
    <span class="addData" @click="addData()">添加</span>
  </div>
</template>
<script>
let list = [
         {
          ruleLevel: "满分",
          scoreBefore: 100,
          scoreEnd: 90,
        },
        {
          ruleLevel: "优秀",
          scoreBefore: 89,
          scoreEnd: 80,
        },
        {
          ruleLevel: "良好",
          scoreBefore: 79,
          scoreEnd: 70,
        },
      ]
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: [],
      notAdded:[] //未添加过的
    };
  },
  created(){
    this.getList();
  },
  methods: {
    // 获取数据
    getList(){
      this.scoreRankList = JSON.parse(JSON.stringify(list));
      let isExist = false; 
      if(this.scoreRankList.length == 0){
        this.notAdded = JSON.parse(JSON.stringify(this.defaultscoreRankList));
        return
      }
      this.defaultscoreRankList.forEach(item => {
        isExist = false;
        for (let item1 of this.scoreRankList) {
          if (item1.ruleLevel == item.ruleLevel) {
            isExist = true;
            break
          }
        }
        if(!isExist) this.notAdded.push(item)
      })
    },
    // 删除
    deleteData(item, index) {
        this.scoreRankList.splice(index, 1);
        this.notAdded.push(item);
    },
    // 添加
    addData() {
      if (this.scoreRankList.length >= 5) {
        return;
      }
      this.scoreRankList.push(this.notAdded[0]);
      this.notAdded.splice(0, 1);
    },
  },
};
</script>
<style lang="scss">
.abc {
  margin-bottom: 20px;
}
.dele {
  margin-left: 100px;
  background-color: #ccc;
  color: red;
}
.addData {
  background-color: #ccc;
  color: red;
}
</style>

引用chatGPT作答，对Vue逻辑处理和数据处理问题的解决方案的一个实现：

<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(ruleLevel) {
      // 找到要删除的数据在数组中的下标
      const index = this.scoreRankList.findIndex(item => item.ruleLevel === ruleLevel);
      if (index > -1) {
        // 如果存在，则从数组中删除该数据
        this.scoreRankList.splice(index, 1);
      }
    },
    // 添加
    addData() {
      // 判断当前数组的长度是否等于5，如果等于5，则不能再添加
      if (this.scoreRankList.length === 5) {
        return;
      }
      // 判断当前数组是否为空
      if (this.scoreRankList.length === 0) {
        // 如果数组为空，则添加默认值
        this.scoreRankList.push(...this.defaultscoreRankList);
      } else {
        // 如果数组不为空，则添加规则为：先添加及格、低分，然后再添加剩余规则
        const hasJige = this.scoreRankList.some(item => item.ruleLevel === '及格');
        const hasDifn = this.scoreRankList.some(item => item.ruleLevel === '低分');
        if (!hasJige || !hasDifn) {
          // 如果不存在及格或低分，则先添加这两个规则
          const newData = [
            { ruleLevel: '及格', scoreBefore: 69, scoreEnd: 60 },
            { ruleLevel: '低分', scoreBefore: 59, scoreEnd: 0 },
          ];
          this.scoreRankList.push(...newData);
        } else {
          // 如果已经存在及格和低分，则添加剩余规则
          const newData = this.defaultscoreRankList.filter(item => !this.scoreRankList.some(i => i.ruleLevel === item.ruleLevel));
          this.scoreRankList.push(...newData);
      }
  }

该回答引用ChatGPT
根据题目描述，大致可以分为以下几个步骤：

1. 组件 data 中定义默认的 defaultscoreRankList 数组，其中包含满分、优秀、良好、及格、低分。
2. 如果有请求回来的 scoreRankList ，则用它来替换 defaultscoreRankList。
3. 定义删除方法 deleteData ，接收一个参数 i ，使用 array.splice(i, 1) 删除 scoreRankList 中的一个元素。
4. 定义添加方法 addData，根据题目要求，需要判断当前数组长度是否小于 5 ，如果不小于则不能进行新增操作，如果小于，则需要判断当前数组是否为空，如果为空，则按照默认数组 defaultscoreRankList 顺序添加元素；如果不为空，则先添加及格和低分，然后添加之前被删除的元素。

下面是实现代码：

  

    

      {{ item.ruleLevel }}
      删除
    

    添加
  



<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() {
      if (this.scoreRankList.length >= 5) {
        return;
      }
      if (this.scoreRankList.length === 0) {
        this.scoreRankList = [...this.defaultscoreRankList];
      } else {
        this.scoreRankList.push(
          { ruleLevel: "及格", scoreBefore: 69, scoreEnd: 60 },
          { ruleLevel: "低分", scoreBefore: 59, scoreEnd: 0 }
        );
        this.defaultscoreRankList.forEach((item) => {
          const index = this.defaultscoreRankList.findIndex(
            (x) => x.ruleLevel === item.ruleLevel
          );
          if (index !== -1) {
            const isExist = this.scoreRankList.some(
              (x) => x.ruleLevel === item.ruleLevel
            );
            if (!isExist) {
              this.scoreRankList.push(item);
            }
          }
        });
      }
    },
  },
};
</script>

该回答引用于ChatGPT：
根据您提供的代码和需求，可以进行如下实现：

<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()" v-if="scoreRankList.length<5">添加</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) {
      if (this.scoreRankList.length > 3) { // 当只剩下3个及以下时不进行顺延操作
        this.scoreRankList.splice(index, 1);
      } else { // 剩下3个及以下时直接删除
        this.scoreRankList = this.scoreRankList.filter((item, idx) => idx !== index);
      }
    },
    // 添加
    addData() {
      let levels = this.scoreRankList.map(item => item.ruleLevel);
      let level = "";
      if (levels.length === 0) { // 当请求回来的值为空数组时，按照默认值添加
        level = this.defaultscoreRankList[levels.length].ruleLevel;
      } else if (levels.length < 5) { // 当请求回来的值小于5时，按照已有的规则添加
        for (let i = 0; i < this.defaultscoreRankList.length; i++) {
          if (!levels.includes(this.defaultscoreRankList[i].ruleLevel)) {
            level = this.defaultscoreRankList[i].ruleLevel;
            break;
          }
        }
      }
      if (level) {
        this.scoreRankList.push(this.defaultscoreRankList.find(item => item.ruleLevel === level));
      }
    },
  },
};
</script>

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

上述代码中，在deleteData方法中，当删除的元素位置大于3时，会进行顺延操作；当删除的元素位置小于等于3时，直接删除元素。在addData方法中，会根据现有的规则进行添加，如果已满5个，则不进行添加。在第一次运行时，如果请求回来的数组为空，则默认按照默认值添加。

希望这些代码和注释可以帮助您完成所需的功能。

该回答引用ChatGPT
根据题目要求，需要在 Vue 中实现添加和删除五个固定数值的功能，并且同时需要考虑请求回来的 `scoreRankList` 对默认值的影响。下面是一种实现方法：

1. 在 `data` 函数中定义默认的 `defaultscoreRankList` 和从请求返回的 `scoreRankList`。同时再加上一个 `deletedList` 数组用来记录被删除的固定数值。

javascript
export default {
  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 }
      ],
      // 被删除的元素用一个数组记录下来
      deletedList: []
    };
  }

2. 在 `methods` 中定义一个 `addData` 方法，该方法将会根据 `scoreRankList` 和 `defaultscoreRankList` 进行判断，以符合题目中的添加条件。在该方法中，先检查 `scoreRankList` 中是否即将添加的数值已存在，如果存在则直接返回。如果不存在，则判断是否已经添加满了 5 个数值，如果已经满了则返回。如果还没有满，则继续添加数值。如果 `scoreRankList` 为空，则意味着第一次添加数值，此时需要按顺序添加满分、优秀、良好、及格、低分。

javascript
methods: {
  addData() {
    // use a variable to mark whether to add
    let needToAdd = false;
    const allLevels = this.deletedList.concat(
      this.scoreRankList.map(item => item.ruleLevel)
    );

    if (allLevels.includes("满分") === false) {
      this.scoreRankList.unshift(this.defaultscoreRankList[0]);
      needToAdd = true;
    }

    if (allLevels.includes("优秀") === false) {
      this.scoreRankList.unshift(this.defaultscoreRankList[1]);
      needToAdd = true;
    }

    if (allLevels.includes("良好") === false) {
      this.scoreRankList.unshift(this.defaultscoreRankList[2]);
      needToAdd = true;
    }

    if (allLevels.includes("及格") === false) {
      this.scoreRankList.push(this.defaultscoreRankList[3]);
      needToAdd = true;
    }

    if (allLevels.includes("低分") === false) {
      this.scoreRankList.push(this.defaultscoreRankList[4]);
      needToAdd = true;
    }

    // check if the scoreRankList is full
    if (this.scoreRankList.length >= 5) {
      needToAdd = false;
    }

    // add the deleted items
    if (this.deletedList.length > 0) {
      this.scoreRankList.push(...this.deletedList);
      this.deletedList = [];
    }

    if (needToAdd === false) {
      return;
    }

    this.scoreRankList.sort((a, b) => {
      if (a.ruleLevel < b.ruleLevel) {
        return -1;
      } else if (a.ruleLevel > b.ruleLevel) {
        return 1;
      } else {
        return 0;
      }
    });
  },
}

3. 在 `methods` 中定义一个 `deleteData` 方法，该方法用于删除已经存在的数值。当点击“删除”按钮时，首先检查这个数值是否为默认值，如果是默认值，则将其添加到 `deletedList` 数组中以备之后添加，否则直接从 `scoreRankList` 中删除。

javascript
methods: {
  deleteData(ruleLevel) {
    const index = this.scoreRankList.findIndex(
      item => item.ruleLevel === ruleLevel
    );

    if (index === -1) {
      return;
    }

    if (index <= 2) {
      this.deletedList.push(this.scoreRankList[index]);
    }

    this.scoreRankList.splice(index, 1);
  }
}

4. 把 `scoreRankList` 作为 `v-for` 的 `item` 时，需要根据 `scoreRankList` 中元素的位置来渲染“添加”按钮的位置。如果 `scoreRankList` 中已经有 5 个数值，则不再显示“添加”按钮。

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

下面是一个可能的实现，实现了题目描述的逻辑。具体实现方式是维护一个包含当前展示的等级的数组 currentLevels，根据它的长度判断是否可以继续添加或者是否需要顺延添加。在删除时，直接从 currentLevels 中删除对应等级，下次添加时会自动顺延。添加时判断是否已经添加了5个或者已经添加了全部的默认等级，如果没有则添加下一个未添加的默认等级。

<template>
  <div class="home">
    <div v-for="level in currentLevels" :key="level.ruleLevel">
      <div class="abc">
        <span>{{ level.ruleLevel }}</span>
        <span class="dele" @click="deleteData(level)">删除</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,
        },
      ],
      currentLevels: [],
    };
  },
  methods: {
    // 删除
    deleteData(level) {
      this.currentLevels.splice(this.currentLevels.indexOf(level), 1);
    },
    // 添加
    addData() {
      if (this.currentLevels.length === 5 || this.currentLevels.length === this.defaultscoreRankList.length) {
        return;
      }

      if (this.scoreRankList.length === 0) {
        let lastLevel = this.currentLevels[this.currentLevels.length - 1];
        let lastLevelIndex = this.defaultscoreRankList.indexOf(lastLevel);
        let nextLevel = this.defaultscoreRankList[lastLevelIndex + 1];
        this.currentLevels.push(nextLevel);
      } else {
        let addedLevel = false;
        for (let level of this.defaultscoreRankList) {
          if (this.currentLevels.indexOf(level) === -1 && this.scoreRankList.findIndex((r) => r.ruleLevel === level.ruleLevel) === -1) {
            this.currentLevels.push(level);
            addedLevel = true;
            break;
          }
        }

        if (!addedLevel) {
          let lastLevel = this.currentLevels[this.currentLevels.length - 1];
          let lastLevelIndex = this.defaultscoreRankList.indexOf(lastLevel);
          let nextLevel= this.defaultscoreRankList[lastLevelIndex + 1];
this.currentLevels.push(nextLevel);
}
}
},
// 初始化等级
initLevels() {
for (let level of this.scoreRankList) {
let defaultLevelIndex = this.defaultscoreRankList.findIndex((r) => r.ruleLevel === level.ruleLevel);
if (defaultLevelIndex !== -1) {
this.currentLevels.push(this.defaultscoreRankList[defaultLevelIndex]);
} else {
this.currentLevels.push(level);
}
}
},
},
mounted() {
this.initLevels();
},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
.abc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 400px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ddd;
}
.addData {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 30px;
  background-color: #00bcd4;
  color: #fff;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
}
.dele {
  color: #ff3d00;
  cursor: pointer;
}

这段代码是一个 Vue.js 组件，用于显示一个级别列表，并允许用户添加和删除级别。这些级别来源于两个数组：defaultscoreRankList 和 scoreRankList。initLevels 方法用于初始化用户显示的级别列表，根据 scoreRankList 和 defaultscoreRankList 的内容来确定。

addData 方法会向用户显示的级别列表中添加一个新级别。如果 scoreRankList 中没有剩余级别，则会添加 defaultscoreRankList 中的下一个级别。如果 scoreRankList 中还有级别，则会添加 defaultscoreRankList 中下一个可用的级别。该方法还检查在任何给定时间内，最多只有 5 个级别被显示，并且在添加 scoreRankList 中的任何其他级别之前，必须先显示 defaultscoreRankList 中的所有级别。

deleteData 方法会从用户显示的级别列表中删除一个级别。

组件模板使用 v-for 指令来迭代 currentLevels 数组，并将每个级别显示为带有删除按钮的 div。当用户点击“添加”按钮时，会触发 addData 方法，当用户点击“删除”按钮时，会触发 deleteData 方法。

以下内容部分参考ChatGPT模型：
首先，需要对默认值和请求回来的值进行合并，使用默认值中的规则，如果请求回来的值中有相同规则，则使用请求回来的值中的数据。代码如下：

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: 95,
      },
      {
        ruleLevel: "良好",
        scoreBefore: 80,
        scoreEnd: 70,
      },
    ],
  };
},
computed: {
  mergedData() {
    const merged = [];
    this.defaultscoreRankList.forEach((defaultItem) => {
      const found = this.scoreRankList.find(
        (item) => item.ruleLevel === defaultItem.ruleLevel
      );
      merged.push(found || defaultItem);
    });
    return merged;
  },
},

接下来，需要在addData方法中根据当前数据的长度来判断是否可以添加新的数据。如果当前数据长度小于5，则可以添加新的数据，否则不做任何操作。如果当前数据长度等于5，则需要按照删除的顺序来添加新的数据。代码如下：

methods: {
  // 删除
  deleteData(i) {
    this.scoreRankList.splice(i, 1);
  },
  // 添加
  addData() {
    if (this.scoreRankList.length < 5) {
      // 添加新的数据，顺序依次为及格、低分、满分、优秀、良好
      const newItem = {
        ruleLevel: "",
        scoreBefore: 0,
        scoreEnd: 0,
      };
      switch (this.scoreRankList.length) {
        case 0:
          newItem.ruleLevel = "及格";
          newItem.scoreBefore = 59;
          newItem.scoreEnd = 60;
          break;
        case 1:
          newItem.ruleLevel = "低分";
          newItem.scoreBefore = 0;
          newItem.scoreEnd = 59;
          break;
        case 2:
          newItem.ruleLevel = "满分";
          newItem.scoreBefore = 100;
          newItem.scoreEnd = 90;
          break;
        case 3:
          newItem.ruleLevel = "优秀";
          newItem.scoreBefore = 89;
          newItem.scoreEnd = 80;
          break;
        case 4:
          newItem.ruleLevel = "良好";
          newItem.scoreBefore = 79;
          newItem.scoreEnd = 70;
          break;
      }
      this.scoreRankList.push(newItem);
    } else if (this.scoreRankList.length === 5) {
      // 按照删除的顺序来添加新的数据
      const newItem = {
        ruleLevel: "",
        scoreBefore: 0,
        scoreEnd: 0,
      };
      const deletedItems = this.defaultscoreRankList.filter(
        (defaultItem) =>
          !this.scoreRankList.find(
            (item) => item.ruleLevel === defaultItem.ruleLevel
          )
      );
      if (deletedItems.length > 0) {
        newItem.ruleLevel = deletedItems[0].ruleLevel;
        newItem.scoreBefore = deletedItems[0].scoreBefore;
        newItem.scoreEnd = deletedItems[0].scoreEnd;
        this.scoreRankList.push(newItem);
      }
    }
  },
},

最后，在模板中可以根据mergedData来循环展示数据。代码如下：

<template>
  <div class="home">
    <div v-for="item in mergedData" :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>

如果我的建议对您有帮助、请点击采纳、祝您生活愉快