需求:选项:单选题、单选题(英)、多选题。全部默认 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>