v-for循环生成行包括select+input 并且不能重复选中option(超级无敌详细!!!)

1、在动态生成:el-form-item的prop的取值(很奇怪 不知道为什么一定要 ‘ xx’+index+‘xx’ 的格式才行,我其他格式会报错)2、加/减一行:使用splice() 这个api (不理解怎么使用 可以用这个网站搜一下MDN Web Docs)再加减之后使用$nextTick() 更新容器的高度(使用ref绑定)3、不能重复选择option定义一个新数组arr 存放已经选中的option(使用splice)v-show=!arr.include(option)
摘要由CSDN通过智能技术生成

功能:

1、动态生成每一行

2、点击option时 在input回显对应的值

3、不可重复点击option(将已有的option删除)

关键点:

1、在动态生成:el-form-item的prop的取值(很奇怪 不知道为什么一定要 ‘ xx’+index+‘xx’ 的格式才行,我其他格式会报错)

2、加/减一行:

  • 使用splice() 这个api (不理解怎么使用 可以用这个网站搜一下MDN Web Docs
  • 再加减之后使用$nextTick() 更新容器的高度(使用ref绑定)

3、不能重复选择option

  • 定义一个新数组arr 存放已经选中的option(使用splice)
  • v-show=!arr.include(option.value)(中文咋说...??只显示不存在arr的option)
  • 使用change事件(change默认传递-选中的value,为了辨别需要增加一个参数 index;传入多个参数的写法: change=(val)=>函数名(val,自定义参数)  (当时卡在这好一会)

展示:

 视频:

v-for循环生成select

template部分

       <el-form :inline="true" :model
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值