<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. pyinstaller根据虚拟环境virtualenv进行打包,降低exe文件大小

    问题:使用pyinstaller打包后,发现打的exe特别大,有近200M,又没有用几个库,代码也很少,怎么会打出这么大的包呢? 分析:在pyinstaller打包的过程中,可以看到窗口中出现了很多本 ...

  2. Enhancement S_ALR_87011964 Asset Balance Report to add custom column

    Enhancement S_ALR_87011964 Asset Balance Report to add custom column - SAP Tutorial Include own fiel ...

  3. python36

    无限循环 如果条件判断语句永远为 true,循环将会无限的执行下去,如下实例: 实例 #!/usr/bin/python # -*- coding: UTF-8 -*- var = 1 while v ...

  4. 【git】2.4 撤销操作

    资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E6%92%A4%E6%B6%88%E6%93%8D%E4%BD%9C ...

  5. 修改ubuntu 源

    查看源的类型,lsb_release -a Codename: jammy ?这里有可能是其他值. 找到同类型的源,修改:/etc/apt/sources.list

  6. yolov5学习遇到的困难

    本文观看目标检测 YOLOv5 开源代码项目调试与讲解实战[土堆 x 布尔艺数]_哔哩哔哩_bilibili视频来部署yolov5环境. 问题1:pycocotools工具包安装问题,参照视频2解决W ...

  7. Entity Framework生成的SQL语句

    var Query= database.Table1.Find(cond, f => f.Table2, f => f.Table3, f => f.Table4, f => ...

  8. centos6.5升级python3.6并安装boto3模块

    1.先升级openssl yum安装各种依赖,yum install gcc gcc-c++ autoconf automake zlib zlib-devel pcre-devel tar zxvf ...

  9. UGUI UI拖拽,UI连线。

    1.拖拽 public class Item : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler { public Re ...

  10. Ubuntu16.04系统语言设置为中文以及搜狗输入法的安装

    特别声明:本文是在操作完才做的记录,不是特别详细,见谅哈! 虚拟机安装的Ubuntu16.04结果语言设置只有英文...起初没啥影响,后来发现自己的脚本注释显示全乱码,而且直接影响脚本运行(其实可能是 ...