element-ui tree 设置成单选,并且父级不可选
<el-tree
:data="date" //数据来源
show-checkbox //节点是否可被选择
node-key="moduldCode" //每个树节点用来作为唯一标识的属性,整棵树应该是唯一的
ref="tree"
check-strictly //在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false
:highlight-current='true' //是否高亮当前选中节点,默认值是 false。
:check-on-click-node="true" //是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。
:accordion="true" //是否每次只打开一个同级树节点展开
:default-checked-keys="[checkedkey]" //默认勾选的节点
:default-expanded-keys="checkedkey" //默认展开的节点
:props="defaultProps" //配置选项
:default-expand-all="true" //是否默认展开所有节点
@check-change="parentModules" //节点选中状态发生变化时的回调
></el-tree>
data() {
return {
date: [{
moduldCode: 1,
moduleName: '一级 2',
disabled:true,
child: [{
moduldCode: 3,
moduleName: '二级 2-1',
disabled:true,
child: [{
moduldCode: 4,
moduleName: '三级 3-1-1'
}, {
moduldCode: 5,
moduleName: '三级 3-1-2',
}]
}, {
moduldCode: 2,
moduleName: '二级 2-2',
disabled:true,
child: [{
moduldCode: 6,
moduleName: '三级 3-2-1'
}, {
moduldCode: 7,
moduleName: '三级 3-2-2',
}]
}]
}],
checkedkey: [],
defaultProps: {
children: "child",
label: "moduleName",
id:'moduldCode' //可要可不要
},
// 取uniqueValue值的时候,列:uniqueValue[0]否则会是一个数组
uniqueValue:''//最后拿到的唯一选择的moduldCode值,相当于id
}
},
//节点选择状态发生改变时
parentModules(data,checkbox,node){
if(checkbox){
// 后端返回的node-key不是id,是moduldCode
this.$refs.tree.setCheckedKeys([data.moduldCode]);
this.uniqueValue = this.$refs.tree.getCheckedKeys();
}else{
this.uniqueValue = this.$refs.tree.getCheckedKeys();
if(this.uniqueValue.length == 0){
this.uniqueValue = ''
}
}
},
回显
modification() {
this.$axios.post("/admin/module/detail", {obj}).then(res => {
this.checkedkey[] = res.date.moduleCode; //树形权限回显
});
}
element-ui tree 设置成单选,并且父级不可选的更多相关文章
- Element ui tree树形控件获取父节点id
Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- 同级div设置display:inline-block,父级div强制不换行
同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...
- Element UI tree 回显问题
Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...
- Element ui tree结合Vue使用遇到的一些问题(一)
下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...
- element ui tree回显 setCheckedNodes,setCheckedKeys,setChecked等函数报undefined问题
在写项目的时候,需要用到tree组件进行回显来进行权限控制: 在回显过程中使用回显函数会报报undefined, 这时只需要给该函数包裹一层nextTick方法就行了, 在回显过程中我们有可能使用半选 ...
- element ui datePicker 设置当前日期之前的日期不可选
pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },
- element - ui tree
一行代码两行泪,没有外网真可怕!好久没写博客了,更新一把. <template> <div> <el-tree :data="data" :props ...
- Element ui tree 搜索
搜索框 属性 :filter-node-method="filterNode" 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点 ...
随机推荐
- hadoop作业
作业要求:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/3223 一.准备一个ubantu 系统 二.创建hadoop用户 创建 设密 ...
- Deep-learning augmented RNA-seq analysis of transcript splicing | 用深度学习预测可变剪切
可变剪切的预测已经很流行了,目前主要有两个流派: 用DNA序列以及variant来预测可变剪切:GeneSplicer.MaxEntScan.dbscSNV.S-CAP.MMSplice.clinVa ...
- 安装Nvidia显卡驱动、CUDA和cuDNN的方法(jsxyhelu整编)
Nvidia显卡驱动.CUDA和cuDNN一般都是同时安装的,这里整理的是我成功运行的最简单的方法. 一.Nvidia显卡驱动 1.1 在可以进入图形界面的情况下 直接在"软件和更新&quo ...
- 史上最全的 DB2 错误代码大全
1 前言 作为一个程序员,数据库是我们必须掌握的知识,经常操作数据库不可避免,but,在写 SQL 语句的时候,难免遇到各种问题.例如,当我们看着数据库报出的一大堆错误时,是否有种两眼发蒙的感觉呢?咳 ...
- Gan-based zero-shot learning 论文整理
1 Feature Generating Networks for Zero-Shot Learning Suffering from the extreme training data imbala ...
- Qt编写小清新风格界面
给一个朋友定制的界面,左侧有导航,左侧底部有运行+暂停+停止按钮,右侧有可伸缩面板,面板之间可以拉伸调节高度,左右两侧可以拉伸调节高度,所有的宽高和位置都保存在配置文件,下次重启立即应用,无边框标题栏 ...
- HUSTOJ搭建后为了方便作为Judger调用进行的一些修改操作
这里的操作主要包括: 找到初始的MySQL数据库用户名和密码: 将 csrf 设置为固定值: 取消掉同一用户相邻提交时间间隔需要10秒钟的限制. 内容如下: 系统:ubuntu18.04.2 hust ...
- System.gc()介绍
System.gc()用于垃圾收集器,调用垃圾收集器将回收未使用的 System.gc()进行回收的准则: 回收没有被任何可达变量指向的对象 JDK实现 public static void gc() ...
- php_mvc实现步骤六
shop34-1-目录布局 存在项目的根目录 shop34 框架代码与应用程序代码划分 框架代码: 在各个应用程序间可以通用的代码. 应用程序代码: 当前项目的业务逻辑实现的代码. 分别创建两个子目录 ...
- Git设定不合并的文件
一个最简单的做法,通过添加.gitattributes文件来完成 1 在要被合并的分支中设置 git config --global merge.ours.driver true设置git配置项mer ...