vue 选择题 A B C D 全部默认 ABCD，最少 AB，最多ABCDE。支持增删改

需求：选项：单选题、单选题(英)、多选题。全部默认 ABCD，最少 AB，最多
ABCDE。支持增删改

假如有ABCD四个选项,删除选项B，剩余的之接更新变成ABC（写个更新方法）

添加的时候也是按照顺序添加 （写个根据传入的索引或已使用的标题，返回下一个可用的标题的方法）

 <el-row>
        <div class="set" v-for="(item, index) in ruleForm.option" :key="index">

          <el-form-item :label="'选项' + item.title">
            <el-input v-model="item.value" />
          </el-form-item>
          <el-button size="mini" type="danger" style="margin-left: 10px;" v-if="ruleForm.option.length >= 3"
            @click="deleteItem(index)"> 删除</el-button>
        </div>
        <el-button :disabled="ruleForm.option.length == 5" style="margin-left: 60px;" type="primary" icon="el-icon-plus"
          size="mini" @click="addItem">新增选项</el-button>
      </el-row>

<script>

export default {

  data () {
    return {
      ruleForm: {
       
        option: [
          { title: 'A', value: '' },
          { title: 'B', value: '' },
          { title: 'C', value: '' },
          { title: 'D', value: '' },
        ]
      },
     
    }
  },
 

  methods: {
    updateTitles () {
      this.ruleForm.option.forEach((item, index) => {
        item.title = this.getNextTitle(index) // 更新标题
      })
    },
    getNextTitle (index) {
      const alphabet = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase() // 定义了一个包含所有大写字母的字符串，表示字母表。
      if (index !== undefined) {
        return alphabet[index] //如果传入了索引参数，就直接根据索引返回字母表中对应位置的字母。
      } else {
        const usedTitles = this.ruleForm.option.map(item => item.title) //从ruleForm.option中获取已使用的标题，使用map方法将每个选项的标题提取出来
        const availableTitles = [...alphabet].filter(letter => !usedTitles.includes(letter)) // 从字母表中过滤出未使用的标题，使用filter方法根据已使用的标题来排除已经使用过的字母。
        return availableTitles[0] // 返回未使用的第一个标题，确保新增的选项不会超出限制
      }
    },
    addItem () {
      this.ruleForm.option.push({ title: this.getNextTitle(), value: '' }) // 添加新选项
    },
    deleteItem (index) {
      this.ruleForm.option.splice(index, 1)
      this.updateTitles() // 更新标题
    },
   }
}
</script>