iview中CheckBox为选中状态,再次点击选中点,能否仍为选中状态?
问题描述
选中一个节点,CheckBox设置value为true。继续点击该节点,代码中设置value继续为true。预期结果为该节点仍被选中,但使用render渲染后CheckBox取消选中。即使用CheckBox过程中,连续点击一个节点两次,该节点只能为选中->取消选中,不能为选中->选中。
问题出现的环境背景及自己尝试过哪些方法
背景:vue + iview + tree组件
自己采用的方法:使用render渲染tree组件。代码中设置每次点击树中节点时,该节点的checked值为true。
相关代码
subitemRender(h, {root, node, data}){
var self = this;
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span', [
h('Checkbox', {
props: {
value: data.checked
},
style: {
marginRight: '8px'
},
on: {
'on-change': (result) => {
// 维度1
if (0 == self.reportDimension) {
data.checked = result;
// 设置全部子节点checked状态为false
this.setChildrenChecked(data, false);
// 设置父节点checked状态为false
this.setParentChecked(data, false);
// 执行查询
this.onSearchClick();
}
// 维度2
if (1 == self.reportDimension) {
// 设置全部节点checked状态为false
this.subitemDatas.forEach((dataPoint) => {
dataPoint.checked = false;
// 设置dataPoint所有子节点checked为false
this.setChildrenChecked(dataPoint, false)
})
// 设置当前选中节点checked状态为true
data.checked = [];
this.$set(data, 'checked', true);
// 设置data的所有子节点checked状态为true
this.setChildrenChecked(data, true);
// 设置data的所有父节点checked状态为false
this.setParentChecked(data, false);
}
}
}
}),
h('span', data.title)
])
]);
},
你期待的结果是什么?实际看到的错误信息又是什么?
期待结果:多次点击同一个复选框时,复选框会一直为选中状态。
错误:选中状态在选中和取消选中直接来回切换。一个选中的节点b再次被点击后,再点击该节点b的父节点a,父节点a及父节点a的全部子节点都会被选中,但b为非选中状态,查看b的checked值为true。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
有个问题?
既然点击不会切换为什么要用 checkbox ?
用 radio 不好吗? 或者直接用 disable 锁掉