第一步:el-tree 配置 <el-tree :data="apiData" :props="apiViewProps" ref='apiDataTree' show-checkbox node-key="id" :check-strictly="true" @check-change="handleCheckChange" > </el-tree> 第二步:通过@check-change实现单选 handleCheckChange(data,checked){ const indexs = this.selectOrg....
先配置node-key属性,每个树节点的唯一标识,必须设置。 然后设置check-strictly属性,父子节点选中是否不关联。默认是false,设置为true时为父子节点选中不关联。 再获取一个el-tree树的ref实例,用来对组件进行操作。 再设置@check事件,在选中节点之后触发的回调。此处注意区分使用@check-change事件,两者的回调参数是不同...
/* 隐藏掉el-tree中有disabled属性的框框 */ /deep/.el-checkbox__input.is-disabled{ display:none; } 1. 2. 3. 4. 然后只能单选: // 选中复选框触发 checkChange(currObj,isChecked) { if(isChecked) {// 选中之后我们就重新设置下选中的节点(只设置当前选中的节点,即单选) this.$refs.Tree.setC...
el-tree如何实现单选 以下需要用到的api : check-strictly: 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false node-key:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 setChecked :通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性...
当页面布局空间不足的时候可以使用,点击出现树形下拉,选择完成后收回去,这里设置的是树形组件只能单选。具体可以自己随意配置。 node-key是必须加上的,标记每一个节点, expanded 属性是设置每个节点的展开和收起,遍历每一个节点设置expanded 为false来收起树的节点。
el-tree里面的选择框,是复选框,但是如果想实现单选效果怎么操作?看代码 <el-tree ref="tree"show-checkbox node-key="deptId"@check="change"></el-tree> /** * 节点选中状态发生变化时的回调 * */change(data,e,l){this.$refs.tree.setCheckedKeys([data.deptId]);},...
3、添加check事件,实现单选。 每次点击树节点选框,出发check事件changeTree。此时存在两种情况,情况一:点击选中;情况二:点击取消。情况一:点击选中 代码语言:javascript 复制 // 处理选择数据changeTree(data,list){console.log(data);// {value: '002-101-301', label: '硬座'}console.log(list);// {checked...
</el-tree>handleNodeClick(data,node){// 节点的点击事件console.log('tree', data);console.log('tree', node);window.localStorage.setItem("node", node);if(node.checked===true) {// 当树被选中时} }handleCheck(nodes, resolve) {//nodes节点所对应的对象;resolve选中状态对象if(resolve.checkedKey...
el-tree 单选 1 创建一个js,过滤树形数组,包含children的选项均禁用 exportconstfilterTreeData=(treeData)=>{returntreeData.filter(item=>{if(isNotEmpty(item.children)){item.disabled=true;item.children=filterTreeData(item.children)}returnitem})}constisNotEmpty=(arr)=>{returnarr&&Array.isArray(arr)...