用的是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我如果点开第二行的‘不符合’,第二行扩展栏打开,填写相关数据,再点击第一行的‘不符合’,第一行扩展栏打开,发现第一行的扩展栏表单数据是刚才填写的第二行数据,感觉就像之前填写的时一个队列里,以此赋给界面上的扩展栏
父组件是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我如果点开第二行的‘不符合’,第二行扩展栏打开,填写相关数据,再点击第一行的‘不符合’,第一行扩展栏打开,发现第一行的扩展栏表单数据是刚才填写的第二行数据,感觉就像之前填写的时一个队列里,以此赋给界面上的扩展栏
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货