当前位置:网站首页>el-tree设置单选,点击完成后收起
el-tree设置单选,点击完成后收起
2022-08-08 18:19:00 【青衣浏阳】
当页面布局空间不足的时候可以使用,点击出现树形下拉,选择完成后收回去,这里设置的是树形组件只能单选。具体可以自己随意配置。
node-key是必须加上的,标记每一个节点,
expanded 属性是设置每个节点的展开和收起,遍历每一个节点设置expanded 为false来收起树的节点。
setCheckedNodes 设置目前勾选的节点,使用此方法必须提前设置 node-key 属性。
@check事件 点击节点复选框之后触发
共两个参数依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象,用currObj,保存当前选中的节点data。使用setCheckedNodes设置选中节点为currObj.
html代码
<el-tree :data="treeData" :props="defaultProps" node-key="id" ref="tree" show-checkbox @check="handleNodeChecked" ></el-tree>
js部分代码
const handleNodeChecked = (currObj, isChecked) => {
const nodeDatas = proxy.$refs.tree.store.nodesMap;
for (let key in nodeDatas) {
nodeDatas[key].expanded = false;
}
if (isChecked) {
proxy.$refs.tree.setCheckedNodes([currObj]);
}
};
边栏推荐
猜你喜欢
随机推荐
2021年9月电子学会图形化二级编程题解析含答案:画正多边形
CS231n: 11 Generative Models
ORACLE子查询 导致无法谓词推入的研究
阿里巴巴云原生大数据运维平台 SREWorks 正式开源
2021年9月电子学会图形化一级编程题解析含答案:无奈的Jaime
flask基础知识:
21天学习挑战赛——机器学习03
Node基于TCP建立的服务器
记录贴:pytorch学习Part2
CS231n:11 生成模型
OpenInfra Days China 2022即将开启,与 openEuler 共话开源技术
TensorFlow学习记录(七):生成对抗网络
在启牛学堂股票开户安全吗?
openEuler资源利用率提升之道02:典型应用下的效果
请问在MAXCOMPUTE SQL 里有没有函数判断string 是否为数字?
蒲公英R300A 4G路由器,远程监控PLC教程
CF803F(容斥原理+莫比乌斯函数)
一些小题22.08.07
面试官:synchronized 和 Lock 的区别是什么?
Numpy函数、模块、类列表









