当前位置:网站首页>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]);
}
};
边栏推荐
猜你喜欢
随机推荐
文件传输-FTP使用简介
canvas城市灯火夜景动画js特效
21天学习第五天--数组
torchvision.transforms
Laravel 5.8笔记
数据压缩和归档(三)、tarfile
Smobiler的复杂控件的由来与创造
CF803F(容斥原理+莫比乌斯函数)
请问在MAXCOMPUTE SQL 里有没有函数判断string 是否为数字?
为什么需要交叉编译器
十六、一起学习Lua 文件 I/O
堆排序(Heap Sort)实现
slam测评工具evo的安装与使用
2021年9月电子学会图形化一级编程题解析含答案:小狗进圈
what‘s the meaning of xenial
右上角按钮圆形扩散导航菜单js特效
蒲公英R300A 4G路由器,远程监控PLC教程
2022年6月电子学会考级试卷真题解析(含答案和所有文档下载)
多线程之不可变对象
智文最终版本