赞
踩
1,实现逻辑使用v-model进行处理,在组件里面使用v-model,以用来实现一个双线数据绑定
在子组件里面用this.$emit('input', list.join(','))更新v-model的数据
在弹框中,我们经常遇到一些需要点击按钮,弹出弹框去选择数据,关闭弹框,回显的过程。
可以根据需求组件化:
<FormTagItem v-model="formData.labelIds"></FormTagItem>
formData.labelIds 弹框修改回显的时候,会获取到字符串组,“1,2,3,4”当前选择项的id组合
1,父组件绑定v-model,子组件使用props接收,并且做一个watch监听,重新获取已勾选数据,在弹框页面中回显已勾选的数据。
2,子组件使用props获取到formData.labelIds,做一个已勾选数据的字典,在我们的全部列表项里面循环处理,打开页面,回显数据
3,选中事件的切换,直接设置一个属性,例如isChoose,让isChoose来回切换,
item.isChoose = !item.isChoose
4,删除当前的已勾选数据,this.$emit('input', list.join(',')) 想父组件传值,改变父组件v-model的数据以及子组件props的value数据,只要是数据有改动,立马重新获取最新的已勾选数据,用于标签回显和打开弹框里面的数据回显。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。