树形选中，一级目录单选，二级目录单选

于 2023-11-22 22:01:11 发布
阅读量54 收藏
点赞数
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45274978/article/details/134563951
版权

实现一级目录单选，但是别的层级可以多选的的效果，@check方法绑定函数，setCheckedKeys方法设置你要选中的函数

  如果是一级目录则直接切换，如果不是，获取父辈的id，保存起来，下一次点击判断

街角～遇到你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Linux杂谈: 树形显示多级目录--tree
andymeng2014的博客
02-27 1135
　　最近写博客的时候偶尔会需要将文件目录结构直观地列出来，例如python的包结构。 　　于是在网上搜了搜，发现了一个Linux下还不错的工具--tree 　　tree 可以很直观地显示多级目录结构。 1. 安装方法 　　Ubuntu上直接 sudo apt install tree 2. 几个比较常规的用法： 　　1. 显示目录结构 [root@ Test]...
zTree的使用1：一级目录保持单选
weixin_45237947的博客
07-01 483
ztree勾选目录时，取消此目录的非上下级关系的其他目录 function zTreeOnCheck(event, treeId, treeNode) { var allParentId = []; function isparent(treeNode) { var parentsNode = treeNode.getParentNode(); i...
jquery 树型(Tree)目录(一)
方逸涛的专栏
08-17 1182
第一步：从数据库中取得数据，并封装为map集合，如下代码： @Controller @Results(value={@Result(name = "success", type = "chain", location = "channel"),
linux--tree命令以树形结构显示文件目录结构
热门推荐
杨森源的博客
09-12 2万+
tree命令可以以树形结构显示文件目录结构，它非常适合于我们给别人介绍我们的文件目录的组成框架，同时该命令使用适当的参数也可以将命令结果输出到文本文件中。注：此处以ubuntu系统为例。在ubuntu系统中默认是没有tree这个命令的，需要安装，用下面的命令就可以安装tree这个命令工具sudo apt-get install tree安装完成以后输出tree –help既可以查看tree命令的使用
Linux tree 命令 - 树形结构显示文件夹目录结构 (list contents of directories in a tree-like format)
既然选择了远方 便只顾风雨兼程 - 永强
09-10 5191
Linux tree 命令 - 树形结构显示文件夹目录结构 (list contents of directories in a tree-like format)
Android三级目录，ListView单选
03-23
本教程将聚焦于如何实现一个三级目录系统，并且在这个系统中集成ListView的单选功能，以及实现二级单选的交互逻辑。这涉及到Android UI设计、数据绑定、事件监听等多个方面。 首先，我们要创建一个三级目录的结构。...
2021-2022计算机二级等级考试试题及答案No.12531.docx
10-26
5. Windows目录结构：Windows操作系统采用的是树形结构的目录组织方式，便于管理和查找文件。 6. 层次模型：在数据库管理系统中，层次模型是一种数据组织方式，用树状结构表示实体及其之间的关系。 7. 行内元素与...
2021-2022计算机二级等级考试试题及答案No.1639.docx
10-29
21. **Windows目录结构**：Windows的文件系统采用的是树形结构，每个目录可以包含子目录和文件。 22. **Iterator的子类**：ListIterator是Iterator的一个子类，支持双向遍历列表。 23. **数据管理技术发展阶段**：...
2021-2022计算机二级等级考试试题及答案No.9922.docx
11-04
计算机二级等级考试试题涵盖了许多IT基础知识，以下是根据题目内容提炼的知识点： 1. `inputBox`函数：在VBScript或VBA中，`inputBox`用于弹出对话框，接收用户的输入，返回值类型为字符串（C）。 2. JavaScript在...
2021-2022计算机二级等级考试试题及答案No.16355.docx
10-29
10. Windows目录结构：Windows操作系统采用的是树形目录结构，允许文件和文件夹嵌套在其他文件夹内，形成层次结构。正确答案是A。 11. JavaScript标识符：在JavaScript中，标识符不能包含算术运算符，所以a*b是不...
Linux之tree命令生成文件目录结构
weixin_46089591的博客
12-09 900
首先先验证一下是否安装了tree，如果没有安装，只需要运行apt-get install tree即可。 使用”tree -L 1 “这个命令，只查看当前第一级的目录和文件使用”tree -L 2 “这个命令，只查看当前第二级的目录和文件使用”tree -L N “这个命令，只查看当前第N级的目录和文件 ...
认识Linux中根目录下的一级目录
iamaowu的博客
02-17 1022
这个是用tree命令查看/下面的结构，当然，很多小伙伴可能会报错说：找不到tree这个命令，那么你可以选择 yum install tree 来安装tree，此外，如下如所示的命令也是可以的 大家可以自己尝试一下，然后我们来简单说一下这些目录是干嘛的，做个简单的了解。 / bin：二进制目录，这个目录放着我们经常会使用的命令 boot：启动目录，里面存放的是启动Linux时使用的一些核心文件，包括一些链接文件以及镜像文件 dev：驱动目录，将所有的硬件以文件的形式存储 etc：配置目录 home：.
tree命令
一年一步的博客
12-04 322
tree命令
Linux 文件与目录管理/tree命令
Charge8的博客
12-12 3557
一、Linux 文件基本属性 Linux系统是一种典型的多用户系统，不同的用户处于不同的地位，拥有不同的权限。为了保护系统的安全性，Linux系统对不同的用户访问同一文件（包括目录文件）的权限做了不同的规定。 在Linux中我们可以使用 ll 或者 ls –l 命令来显示一个文件的属性以及文件所属的用户和组。 第一列： 文件类型(共10个字符) +...
vue|Element，前端哪些奇奇怪怪的需求——el-tree结合el-select实现通过多选框选定一级目录展示该目录下的所有子集分支
killbibi的博客
09-19 1082
1. 需求分析 将多个一级目录存放在el-select多选框，选定该目录，则在el-tree中展示中该一级目录下的所有子集选项，通过多选框过滤el-tree的数据，大致效果图如下所示： 2. 代码分析 首先展示数据解构: //数据 data: [ { id: 1, label: '理论课', children: [
Linux: Linux中“/”， “./“和”../“的含义
非著名JAVA程序员的博客
09-09 1万+
Linux中“/”， “./"和”…/"的含义 Linux 中的文件（夹）是以树形结构表示的。 / 表示根目录 ./ 表示当前目录 ../ 表示上一层目录
命令（二）文件、文件夹类
In_engineer的博客
10-24 923
整理一些我平时用到的命令，并不会很详细，但是很实用。
cascader第一级单选第二级多选
最新发布
12-25
要实现cascader的第一级为单选，第二级为多选，可以使用一些前端框架或库来实现，例如Vue.js和Element UI。下面是一个使用Vue.js和Element UI实现的示例代码： ```html <template> <div> <el-cascader v-model="selectedOptions" :options="options" :props="props" :show-all-levels="false" :clearable="false" :change-on-select="true" @change="handleCascaderChange" ></el-cascader> </div> </template> <script> export default { data() { return { selectedOptions: [], options: [ { value: 'option1', label: 'Option 1', children: [ { value: 'option1-1', label: 'Option 1-1', children: [ { value: 'option1-1-1', label: 'Option 1-1-1' }, { value: 'option1-1-2', label: 'Option 1-1-2' } ] }, { value: 'option1-2', label: 'Option 1-2', children: [ { value: 'option1-2-1', label: 'Option 1-2-1' }, { value: 'option1-2-2', label: 'Option 1-2-2' } ] } ] }, { value: 'option2', label: 'Option 2', children: [ { value: 'option2-1', label: 'Option 2-1', children: [ { value: 'option2-1-1', label: 'Option 2-1-1' }, { value: 'option2-1-2', label: 'Option 2-1-2' } ] }, { value: 'option2-2', label: 'Option 2-2', children: [ { value: 'option2-2-1', label: 'Option 2-2-1' }, { value: 'option2-2-2', label: 'Option 2-2-2' } ] } ] } ], props: { value: 'value', label: 'label', children: 'children' } }; }, methods: { handleCascaderChange(value) { console.log(value); } } }; </script> ``` 在上面的示例中，`el-cascader`组件是Element UI提供的cascader组件，通过设置`show-all-levels`为`false`，可以实现第一级为单选，第二级为多选。通过设置`change-on-select`为`true`，可以在选择第一级选项时立即触发`change`事件。在`change`事件的处理函数中，可以获取到选择的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值