当前位置:网站首页>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]);
}
};
边栏推荐
猜你喜欢

CF1165F2(二分答案)

牛客2022 暑期多校6 B Eezie and Pie(树上差分 + 倍增求第 kth 祖先板子)

面试官:Redis 大 key 要如何处理?

响应式pbootcms模板建筑装饰类网站

Nioke 2022 Summer Multi-School 6 B Eezie and Pie (Difference on the tree + multiplication to find the kth ancestor board)

openEuler 社区 2022 年 7 月运作报告

文件传输-FTP使用简介

熬夜拜读349页阿里面试通关手册,成功闯入字节

百度分享插件的使用

Fortinet全新云原生保护产品上线亚马逊云科技平台
随机推荐
mysql5.7安装教程(附下载链接)
ORACLE子查询 导致无法谓词推入的研究
what's the meaning of xenial
数据压缩和归档(二)、zipfile
js温度计插件自定义数值
CS231n: 11 Generative Models
荧光探针/近红外荧光/荧光纳米/水凝胶/纳米水凝胶pH荧光探针的研究
多线程之不可变对象
echart 股票数据分析 开发备忘录
数字货币永续合约交易所开发开发功能以及代码呈现
HCIP第十三天作业——综合实验
CF533B(树形dp+转移技巧)
如何让您的wiki内容更高级?
grpc服务发现&负载均衡
一些小题22.08.07
浅谈C语言简单实现二分查找
水印图像读取与制作,三通道图转为4通道,制作透明图
【wpf】Bingding的方向和触发的时机
2021年9月电子学会图形化三级编程题解析含答案:计算平均分
精彩来袭!鲲鹏开发者创享日·长沙站来啦