iview中CheckBox为选中状态,再次点击选中点,能否仍为选中状态?

发布于 2022-09-12 03:21:13 字数 2851 浏览 11 评论 0

问题描述

选中一个节点,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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

好多鱼好多余 2022-09-19 03:21:13

有个问题?
既然点击不会切换为什么要用 checkbox ?
用 radio 不好吗? 或者直接用 disable 锁掉

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文