关于javascript:ElementUI-Tree-组件实现自定义勾选父子选项

61次阅读

共计 1786 个字符,预计需要花费 5 分钟才能阅读完成。

[toc]

创立工夫:2020-11-02

为什么要自定义实现勾选,而不是采纳其自带的勾选?

  1. 当设置了:复选框 和 check-strictly = false(默认) 父子关联,会呈现:

    • 选中父级,勾选所有子选项;勾销父级选中,同时勾销子选项勾选
    • 选中子选项,父选项变为半选中状态,如果勾选所有子选项,父选项为选中状态
  2. 当设置了:复选框 和 check-strictly = true 父子无关联,会呈现:

    • 父级的选中和勾销选中,都不会对子选项的状态有任何的影响
    • 子选项的选中和勾销,都不会对父选项的状态有任何的影响

综合上述景象: 如果想独自只选中父选项,不抉择任一子选项 ,性能无奈实现,所以采纳自定义勾选

实现步骤

既然应用自定义勾选,所以采纳 check-strictly = true 父子无关联

html 代码

<el-tree
    ref="cusTreeRef"
    show-checkbox
    check-strictly
    default-expand-all
    node-key="id"
    :data="treeData"
    :props="defaultProps"
    @check="handleCheck">
</el-tree>
<p>
    <b> 以后选中 </b> <span>{{cusChecked}}</span>
</p>

vue 代码

data () {
    return {
        defaultProps: {
            children: 'children',
            label: 'label'
        },
        treeData: [{
            id: 1,
            label: '一级 1',
            children: [{
                id: 4,
                label: '二级 4',
                children: [{
                    id: 9,
                    label: '三级 9'
                }, {
                    id: 10,
                    label: '三级 10',
                    children: [{
                        id: 11,
                        label: '四级级 11'
                    }, {
                        id: 12,
                        label: '四级级 12'
                    }]
                }]
            }]
        }],
        cusChecked: []}
}

handleCheck (currentNode, treeStatus) {console.log(currentNode, treeStatus)
    /**
     * @des 依据父元素的勾选或勾销勾选,将所有子级解决为抉择或非选中状态
     * @param {node: Object}  以后节点
     * @param {status: Boolean}(true:解决为勾选状态;false:解决非选中)*/
    const setChildStatus = (node, status) => {
        /* 这里的 id children 也能够是其它字段,依据理论的业务更改 */
        this.$refs.cusTreeRef.setChecked(node.id, status)
        if (node.children) {
            /* 循环递归解决子节点 */
            for (let i = 0; i < node.children.length; i++) {setChildStatus(node.children[i], status)
            }
        }
    }
    /* 设置父节点为选中状态 */
    const setParentStatus = (nodeObj) => {
        /* 拿到 tree 组件中的 node, 应用该办法的起因是第一次传入的 node 没有 parent */
        const node = this.$refs.cusTreeRef.getNode(nodeObj)
        if (node.parent.key) {this.$refs.cusTreeRef.setChecked(node.parent, true)
            setParentStatus(node.parent)
        }
    }

    /* 判断以后点击是选中还是勾销选中操作 */
    if (treeStatus.checkedKeys.includes(currentNode.id)) {setParentStatus(currentNode)
        setChildStatus(currentNode, true)
    } else {
        /* 勾销选中 */
        if (currentNode.children) {setChildStatus(currentNode, false)
        }
    }

    this.cusChecked = [...this.$refs.cusTreeRef.getCheckedKeys()]
}

代码外围性能阐明:

  1. 判断点击是选中操作,还是勾销选中操作
  2. 如果是选中,则递归的去选中其父级,以及其所有子选项
  3. 如果是勾销选中,则递归的将子选项的状态改为非选中

欢送交换 Github

正文完
 0