<el-tree
:props="props"
ref="treeList"
:load="loadNode"
check-strictly
show-checkbox
node-key='id'
@check ='changetree'
@check-change="handleCheckChange">
</el-tree> handleCheckChange(data, checked, tree) {
if (checked) {
this.currentNodeData.id = data.id
this.$refs.treeList.setCheckedNodes([data.id])
}
},
changetree(data,lst)
{
if(lst,checkedKeys.lenght==0)
this.$refs.treeList.setCheckedNodes([data.id])
}

说明,一定存在node-key值,并且通过ref定位到具体树进行赋值。

其他可用函数说明:

this.$refs.treeList.getCheckedNodes();获取选中节点数据
this.$refs.treeList.getCheckedKeys();获取所有所选节点的主键ID数组
this.$refs.treeList.setCheckedKeys([data.id]);给选定节点的主键ID数组,树节点会勾选


 

vue el-tree 单选实现的更多相关文章

  1. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  2. Vue iview Tree组件实现文件目录-高级实现

    Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class=&quo ...

  3. Vue iview Tree组件实现文件目录-基础实现

    注册页面路由 router/router.js { path: 'folder_tree', name: 'folderTree', component: () => import('@/vie ...

  4. vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框

    vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...

  5. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  6. Vue el 使用el-checkbox-group复选框进行单选框操作

    el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂.重要的是@chage到我们 ...

  7. IT小鲜肉 Widgets Tree 单选、多选、相关回调函数、获取选中的节点功能

    写一个树控件并没有想象中的那么容易,今天又花了我一个1个多小时,主要为IT小鲜肉 Widgets Tree控件添加了 单选.多选.选择前和选择后两个回调函数.获取选中节点的功能.后面会继续努力完善这个 ...

  8. vue elementUi tree 懒加载使用详情

    背景:vue下使用elementUI 文档:http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian 需求:只 ...

  9. vue+element tree(树形控件)组件(2)

    今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...

  10. Vue el与data的两种写法 && Object.defineProperty方法

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

随机推荐

  1. 使用nodejs中遇到的问题

    1.post请求必须使用express的一个中间件body-parser一下不然req.body会一直为空 2.node.js这种东西后端跨域就行,前端就别跨域了,不然会一直报错 3.sql语句那个s ...

  2. linux运维之道学习笔记

    linux常用命令 1.find命令 find / "*.log" 查找/目录下.log结尾的档案 find / -mtime -3 查找/目录下三天内被修改的档案 find / ...

  3. 集群分发xsync xcall kafka启动脚本命令,命令方式安装epel源

    安装epel库源 yum install epel-release -y --nogpgcheck yum install glances 安装开始 建立hosts 白名单 127.0.0.1 loc ...

  4. 正则表达式re.compile()的使用

    re 模块提供了不少有用的函数,用以匹配字符串,比如: compile 函数match 函数search 函数findall 函数finditer 函数split 函数sub 函数subn 函数re ...

  5. .Net Core WebApi 控制器自动创建文件夹上传图片

    /// <summary> /// 异步图片或文件上传 /// </summary> /// <param name="formFile">&l ...

  6. COM 对象的利用与挖掘4

    作者:Joey@天玄安全实验室 前言 本文在FireEye的研究Hunting COM Objects[1]的基础上,讲述COM对象在IE漏洞.shellcode和Office宏中的利用方式以及如何挖 ...

  7. Tensorflow框架实现中的“三”种图

    https://zhuanlan.zhihu.com/p/31308381 图(graph)是 tensorflow 用于表达计算任务的一个核心概念.从前端(python)描述神经网络的结构,到后端在 ...

  8. git push 时发生的error: failed to push some refs to

    - 先再一个新建的一个文件夹里面git clone +你要克隆的远程仓库 - 然后把克隆下来的.git文件夹复制到你的本地仓库,然后再commit-git add, - git push 就可以提交成 ...

  9. lineHeight 和fontSize的区别

    参考资料:https://blog.csdn.net/WuLex/article/details/94667136 暂时记录,待测试确认. lineHeight包含了行间距,而fontSize只是字体 ...

  10. 安装gitlab的总结

    安装过程参考文档 http://www.linuxe.cn/post-520.html https://www.bilibili.com/read/cv4602641 备注要点: 1.gitlab安装 ...