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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/415620.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ安装和使用

简介 RabbitMQ是一套开源&#xff08;MPL&#xff09;的消息队列服务软件&#xff0c;是由LShift提供的一个Advanced Message Queuing Protocol (AMQP) 的开源实现&#xff0c;由以高性能、健壮以及可伸缩性出名的Erlang写成。所有主要的编程语言均有与代理接口通讯的客户端库…

React里面table组件的时间轴的位置计算

如上图的时间轴位置计算 计算时间轴位置倒是容易&#xff0c;主要是React里面的antd的table组件怎么监听滚动是个问题 /*** &#xff08;月台/时间&#xff09;为150&#xff0c;时间为100&#xff0c;每个格子为120&#xff0c;120px/30分钟4px/分钟* 00:00分为250px* 00:…

3Dmax灯光学习(Vray灯光应用)

渲染效果图可以用渲染100哦&#xff0c;最高支持max2024&#xff0c;cr11&#xff0c;vr6.2&#xff0c;支持LUT和Acescg工作流等常用插件&#xff0c;同时森林插件7.43也进行了支持&#xff0c;注册填邀请码【7788】即可免费测试&#xff01; 灯光应用 普通灯光/标准灯光(外景…

爬虫笔记(一):实战登录古诗文网站

需求&#xff1a;登录古诗文网站&#xff0c;账号&#xff0b;密码&#xff0b;图形验证码 第一&#xff1a;自己注册一个账号&#xff0b;密码哈 第二&#xff1a;图形验证码&#xff0c;需要一个打码平台&#xff08;充钱&#xff0c;超能力power&#xff01;&#xff09;或…

定向减免!函数计算让 ETL 数据加工更简单

业内较为常见的高频短时 ETL 数据加工场景&#xff0c;即频率高时延短&#xff0c;一般费用大头均在函数调用次数上&#xff0c;推荐方案一般为攒批处理&#xff0c;高额的计算成本往往令用户感到头疼&#xff0c;函数计算推出定向减免方案&#xff0c;让 ETL数据加工更简单、更…

容器技术1-容器与镜像简介

目录 1、容器与虚拟化 2、容器发展历程 3、镜像简介 4、镜像原理 &#xff08;1&#xff09;分层存储 &#xff08;2&#xff09;写时复制 &#xff08;3&#xff09;内容寻址 &#xff08;4&#xff09;联合挂载 1、容器与虚拟化 容器技术在操作系统层面实现了对计算机…

HarmonyOS【应用服务开发】在模块中添加Ability

Ability是应用/服务所具备的能力的抽象&#xff0c;一个Module可以包含一个或多个Ability。应用/服务先后提供了两种应用模型&#xff1a; FA&#xff08;Feature Ability&#xff09;模型&#xff1a; API 7开始支持的模型&#xff0c;已经不再主推。Stage模型&#xff1a;AP…

深入理解MyBatis中的#{ }和${ }占位符及参数传递过程

深入理解MyBatis中的#{ }和${ }占位符及参数传递过程 MyBatis是一个广泛使用的持久层框架&#xff0c;它以其强大的数据库访问能力和灵活的SQL映射配置而著称。在MyBatis中&#xff0c;#{ } 和 ${ } 是两种常用的占位符&#xff0c;用于构建动态的SQL语句。本文将深入研究这两种…

uniCloud ---- uni-captch实现图形验证码

目录 用途说明 组成部分 目录结构 原理时序 云端一体组件介绍 验证码配置&#xff08;可选&#xff09;&#xff1a; 普通验证码组件 公共模块 云函数公用模块 项目实战 创建云函数 创建注册页 创建云函数 关联公用模块 uni-captcha 刷新验证码 自定义实现 验…

使用 Kali Linux Hydra 工具进行攻击测试和警报生成

一、Hydra 工具和 Kali Linux 简介 在网络安全领域中&#xff0c;渗透测试是评估系统密码强度的重要组成部分。Hydra 是一款由黑客组织“The Hackers Choice”开发的开源登录破解工具&#xff0c;支持50多种协议。本教程将探索如何将 Hydra 与 Kali Linux 结合使用&#xff0c…

浏览器插件:Web Scraper 基本用法和抓取页面内容(无需写代码,即可爬取数据)

Web Scraper 是一个浏览器扩展&#xff0c;用于从页面中提取数据(网页爬虫)。对于简单或偶然的需求非常有用&#xff0c;例如正在写代码缺少一些示例数据&#xff0c;使用此插件可以很快从类似的网站提取内容作为模拟数据。从 Chrome 的插件市场安装后&#xff0c;页面 F12 打开…