在Element Plus 的 el-tree 组件中,如果你希望选中一个父节点时不自动选中其下的子节点,可以通过设置 check-strictly 属性为 true 来实现。这个属性允许你独立地选择父节点和子节点,而不是默认的父子联动选中。 下面是一些详细的步骤和代码示例,帮助你实现这个需求: 1. 设置 check-strictly 属性 在el-tree 组件...
可以单独选择父节点,选子节点时默认选中父节点,无半选状态。 效果: 代码: <template><el-treeref="tree":data="treeData"show-checkboxdefault-expand-allnode-key="id":props="defaultProps"check-strictly="false"@check="handleClick"></el-tree></template>exportdefault{data(){return{treeData:[{id:1,...
1. 选中父节点,只勾选当前节点 2. 选中子节点,勾选上面所有的父节点,除了根节点 3. 取消勾选子节点,如果有同级子节点是勾选状态,父节点不取消勾选;反之取消 效果展示: 修改el-tree组件的父子关系,选中节点后向上选中所有父级 代码实现: html部分: <template> <el-input placeholder="输入关键字进行过滤" ...
el-tree 树形控件实现:每级可单独选择,选择父级不选中 代码 HTML代码 <!-- 使用Element UI的el-tree组件展示树形结构数据,支持多选和操作子节点 --> <el-tree :data="treeData" node-key="id" :expand-on-click-node="false" highlight-current :props="treeProps"> <!-- 自定义节点内容显示方式 --...
},checkChange(data, checked, indeterminate) {const_this=this// console.log(data, checked, indeterminate);// 选中全部子节点,父节点也默认选中,但是子节点再次取消勾选或者全部子节点取消勾选也不会影响父节点勾选状态constcheckNode=_this.$refs.tree.getNode(data)// 获取当前节点// 勾选部分子节点,父...
现在只单独实现了所有父节点和所有子节点取消选中,如果同时设置就会有问题,需求是选中节点的所有父节点和字节点都取消选中 const setNode = (node) => { if(node.checked) { // 如果当前是选中checkbox,则递归设置父节点和父父节点取消选中 setParentNode(node); } else { // 当前是取消选中,将所有子节点都...
第一步:实现父子节点不相互关联 子组件: 父组件: 第二步:实现勾选子节点,父节点会被勾选 关键问题是如何勾选某个节点。 方式一:setChecked()通过父节点的nodeKey或者data; 方式二:找到父节点的node,设置checked = true 方式一(推荐):监听每个节点,若被勾选,则勾选它的父节点。即: ...
children[i]) } }, // 解除选中禁用子节点 childYong(data) { const a = data.children.length for (let i = 0; i < a; i++) { data.children[i].is_show = false for (let j = 0; j < this.checkedDepartment.length; j++) { if (this.checkedDepartment[j].id === data.children[i...
产生原因:当我们在全部选中某一项权限时 权限的父级id也会被加入到我们已选择的权限中 当我们把含有父级id的权限数组传给后端,再请求权限列表时,el-tree检测到里面包含的父级权限的id,就会默认勾选上该父级权限及他下面的所有子权限。 解决办法: 办法1:取消父子级联动效果 使用 check-strictly 属性, ...
1、当你通过函数设置勾选节点的时候,只要父节点被勾选子节点必会勾选上,即便设置勾选的list中无此子节点。 2、当你点击勾选复选框时候,若点击父节点,其下子节点全部统一跟随父节点变化;若点击子节点,子节点部分勾选时父节点处于半选状态,子节点全部勾选时父节点选中,子节点全部不勾选时父节点未选中。