功能:
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