<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. Delphi as 和 is 的使用

    as就是把某个类型对象转换为某个指定类型,这样方便使用指定类型中的一些成员. is就是判断某个对象是不是某个类型,可以筛选出我们需要的对象. 下面是一个as is 的实例代码,该代码同时也实现了两种方 ...

  2. 【小白必经之路:玩转STL】array容器

    此篇随笔将示范array容器的基本操作 1.介绍 array容器在C++普通数组的基础上,添加了一些函数.在使用上,它比普通数组更安全. 2.头文件及命名空间 1 #include<array& ...

  3. ffmpeg 截取视频

    ffmpeg -ss 00:00:03 -t 22 -i output20230301.mp4 output20230301_0.mp4 -ss:开始时间 -t:持续时间 -i:输入 接着是输出

  4. python中的KeyError报错

    from util import str_util #业务逻辑:兼容不同的结构体:resCode转化数据 #检查字典中是否存在键 if 'resCode' not in resultJson if ' ...

  5. 论文笔记:Symbolic Execution for Software Testing: Three Decades Later

    论文笔记:Symbolic Execution for Software Testing: Three Decades Later 作者 Cristian Cadar 是英国帝国理工学院SRG(Sof ...

  6. R7-1 判断回文字符串

    R7-1 判断回文字符串 分数 15 全屏浏览题目 切换布局 作者 颜晖-历年试卷 单位 浙大城市学院 输入一个字符串,判断该字符串是否为回文.回文就是字符串中心对称,从左向右读和从右向左读的内容是一 ...

  7. 简单生成excel文件

    import os import xlwt def save_to_excel(check_date, data): book = xlwt.Workbook(encoding='utf-8', st ...

  8. Oracle 存储过程2: PL/SQL数据类型

    一.标量数据类型 标量数据类型的变量只有一个值,且内部没有分量.标量数据类型包括数字型,字符型,日期型和布尔型.这些类型有的是 Oracle SQL 中有的数据类型,有的是 PL/SQL 自身附加的数 ...

  9. go web编程学习记录

    学习 https://segmentfault.com/a/1190000013297625的记录 简单demo package main import "github.com/gin-go ...

  10. unity002

    物体轴心点变换 轴向变换 预览 暂停 逐帧播放 坐标 世界坐标 物体坐标 mesh 网格决定形状 渲染