<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 设置成单选,并且父级不可选的更多相关文章

  1. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  2. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  3. 同级div设置display:inline-block,父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  4. Element UI tree 回显问题

    Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...

  5. Element ui tree结合Vue使用遇到的一些问题(一)

    下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...

  6. element ui tree回显 setCheckedNodes,setCheckedKeys,setChecked等函数报undefined问题

    在写项目的时候,需要用到tree组件进行回显来进行权限控制: 在回显过程中使用回显函数会报报undefined, 这时只需要给该函数包裹一层nextTick方法就行了, 在回显过程中我们有可能使用半选 ...

  7. element ui datePicker 设置当前日期之前的日期不可选

    pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },

  8. element - ui tree

    一行代码两行泪,没有外网真可怕!好久没写博客了,更新一把. <template> <div> <el-tree :data="data" :props ...

  9. Element ui tree 搜索

    搜索框 属性 :filter-node-method="filterNode" 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点 ...

随机推荐

  1. [C++] 对象指针使用方法

    对象指针:指向类对象的指针 类指针指向类变量(对象)的地址 对象指针定义格式: 类类型 *变量名: 举例: #include <iostream> using namespace std; ...

  2. B2C电子商务系统研发——商品SKU分析和设计(一)

    一.SKU及相关概念定义 在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...

  3. 【转】怎么去阅读Chromium的源码?

    同样路过一下. 从初学者角度的话,如果是刚开始研究chromium,建议找个老版本chromium来看.新版太大太复杂了. 我建议从github搜下chromium.bb这个项目,是个chromium ...

  4. JAVA从服务器下载文件根据Url把多文件打包成ZIP下载

    注意: 1. String filename = new String(“xx.zip”.getBytes(“UTF-8”), “ISO8859-1”);包装zip文件名不发生乱码.  2.一定要注意 ...

  5. PHP系列 | 编译安装msgpack-php

    Msgpack 是一个 PECL 扩展,此扩展提供用于与 MessagePack 序列化通信的 API. MessagePack 是一个基于二进制高效的对象序列化类库,可用于跨语言通信.它可以像JSO ...

  6. CentOS 7 安装FTP服务器(vsftpd)

    FTP是安装各种环境前的预备环节,因为我们要把下载好的安装包上传上去.其次,在一个团队中,FTP服务器为多用户提供了一个文件储存场所,总之是一个非常实用的工具. 1.安装vsftpd # 首先要查看你 ...

  7. python笔记之按文件名搜索指定路径下的文件

    1.搜索文件名中以指定的字符串开头(如搜索dll,结果中含有dll a,dll abc等) 我的目录下有dll a.txt和dll.txt文件 其中a文件夹下还有这两个文件 我希望通过python选择 ...

  8. openresty开发系列38--通过Lua+Redis 实现动态封禁IP

    openresty开发系列38--通过Lua+Redis 实现动态封禁IP 一)需求背景为了封禁某些爬虫或者恶意用户对服务器的请求,我们需要建立一个动态的 IP 黑名单.对于黑名单之内的 IP ,拒绝 ...

  9. linux环境中,openssl升级及openresty中nginx基于新版本openssl重新编译

    需求说明: 最近在对系统进行安全扫描的时候,出现了openssl版本的问题,建议对openssl版本进行升级,在此记录下升级过程. 环境说明: 操作系统:RHEL 6.6 升级操作过程: 1.下载最新 ...

  10. 在使用redis做缓存后,mybatis的延迟加载失效

    原来使用的是EHcache,mybatis延迟加载没有问题,改成redis后,延迟加载获得数据时就会发生错误. 报:Cannot get Configuration as configuration ...