场景:

        今天在做项目的时候,前端业务数据设计到树形展示,并需要单选,打开Element,选中 el-tree 组件,但官方文档中只支持多选,并不支持单选,需要对当前组件进行一定的拓展,以达到满足我们项目中的 要求。

解决思路:

     首先研读el-tree组件api ,我们可以得知,el-tree中有 check-change  事件,即当前节点选中状态发生变化时的回调,通过这个我们可以获得当前操作的节点对象。

    其次,在 el-tree 组件的方法中我们能找到 setCheckedKeys 设置当前所有已选中的节点(PS: 如api所述 使用 setCheckedKeys 时,必须设置 node-key 属性)

 

通过对上述 check-change 事件和 setCheckedKeys 方法的组合,我们可以通过 check-change 事件获取当前选中的节点对象,并通过 setCheckedKeys 方法设置当前 el-tree组件的选中节点为当前的节点对象,以实现我们的单选效果。

代码示例:

                <el-tree
                        ref="dataTree"
                        :data="data"
                        node-key="id"
                        :props = props
                        show-checkbox
                        @check-change="handleCheckChange">
                </el-tree>
            handleCheckChange(data, checked, indeterminate) {
                if (checked) {
                    this.$refs.dataTree.setCheckedKeys([data.id])
                }
            },

 

Logo

前往低代码交流专区

更多推荐