关于Vue父子组件数值一致的问题

月想容 2018-06-01 06:25:23
用的是iview组件库
父组件是Table 子组件是expand类型,我的这个大概是个form表单
父组件table根据data和column渲染绑定值,子组件只要获取每行的一个id 大概和index差不多
现在希望有的行根据需要(产品不合格,填写参数)展开出表单,然后表单填写完
总共有30行左右数据

现有问题:
1.当我子组件修改值以后,要试试修改父组件的值,我用的是一个watch监听,然后通过emit传给父组件,父组件的值修改后又返回来修改子组件,导致子组件刷新,界面变得每输入一个字母就会失去焦点
2
{
title: '核查情况',
//type: 'button',
//type: 'expand',
ellipsis:true,
width: 160,

render: (h, params) => {
return h('RadioGroup',{
props:{

},
on:{
'on-change': (status)=>{

//备注: 不要用params。row来修改数据
//table根据data来变更。当前行数据的修改不会反馈到后台script里的数据
//使用$set能够动态监测
console.log("status -- " + status)
if(status === 'false'){
//问题: 点击时第一下不会触发界面效果
//this.pagerData.data[params.row._index]._expanded = true
this.$set(this.pagerData.data[params.row._index], '_expanded', true)
}else{
this.$set(this.pagerData.data[params.row._index], '_expanded', false)
}
}
}
},[
h('Radio',{
props:{
label: 'true'
}
},'符合'),
h('Radio',{
props:{
label: 'false'
}
},'不符合')
]
);
}
},
{
ellipsis:true,
type: 'expand',
width: 0,
render: (h, params) => {
return h(HidedangerInfo, {
style:{
//padding: 0
},
props: {
row: params.row
}
});
}
}

这里的代码,在点击不符合时,能出来效果,但是radio那个黑点要第二次点击才有

3我如果点开第二行的‘不符合’,第二行扩展栏打开,填写相关数据,再点击第一行的‘不符合’,第一行扩展栏打开,发现第一行的扩展栏表单数据是刚才填写的第二行数据,感觉就像之前填写的时一个队列里,以此赋给界面上的扩展栏
...全文
1276 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
月想容 2018-06-05
  • 打赏
  • 举报
回复
最后换成elementui组件库解决了,在数据绑定方面感觉确实要比iview好点!

87,990

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧