vue el-tree 单选实现
<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 单选实现的更多相关文章
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
- Vue iview Tree组件实现文件目录-高级实现
Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class=&quo ...
- Vue iview Tree组件实现文件目录-基础实现
注册页面路由 router/router.js { path: 'folder_tree', name: 'folderTree', component: () => import('@/vie ...
- vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框
vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...
- vue实现功能 单选 取消单选 全选 取消全选
vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...
- Vue el 使用el-checkbox-group复选框进行单选框操作
el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂.重要的是@chage到我们 ...
- IT小鲜肉 Widgets Tree 单选、多选、相关回调函数、获取选中的节点功能
写一个树控件并没有想象中的那么容易,今天又花了我一个1个多小时,主要为IT小鲜肉 Widgets Tree控件添加了 单选.多选.选择前和选择后两个回调函数.获取选中节点的功能.后面会继续努力完善这个 ...
- vue elementUi tree 懒加载使用详情
背景:vue下使用elementUI 文档:http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian 需求:只 ...
- vue+element tree(树形控件)组件(2)
今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
随机推荐
- argocd
argocd Argo CD - Declarative GitOps CD for Kubernetes (argo-cd.readthedocs.io) What Is Argo CD Argo ...
- 用有限差分估计(Finite Difference Estimate)解决地理坐标与平面像素坐标转换过程的误差造成风场粒子向量失真问题
下载NCEP的气象场grib2数据,风场是二维的向量,包含u和v两个分量.这个用经纬度投影到像素坐标会产生误差,直接绘制效果不太对:( 通过插值计算得到风场粒子的预测数据wind = interp ...
- SpringBoot启动流程简要分析
声明 源码基于Spring Boot 2.3.12.RELEASE 背景 此文的目的主要想弄明白为什么在Spring Boot中注册Servlet.Filter.Listener组件时需要加上@Ser ...
- Linux安装oracle jdk
jdk8下载地址:Java Archive Downloads - Java SE 8 (oracle.com) ##安装oracle linux时自带的jdk [root@mylinux7 ~]# ...
- restful的10个规范、序列化和反序列化的名词解释
# 概念 REST全称是Representational State Transfer,中文意思是表述:表征性状态转移. RESTful是一种定义Web API接口的设计风格,尤其适用于前后端分离的应 ...
- fpga always赋值
- kafka日志数据清理策略
vim /kafka/server.properties # 日志清理策略优先级是谁先满足条件. # 保留7天的日志数据 log.retention.hours=168 # 日志数据总大小保留100G ...
- Unity 凹多边形三角剖分
游戏中需要实现一个小功能,显示一个玩家的能力图,这个图是一个有6个顶点任意摆放组合的多边形.而绘制多边形主要用到的知识就是Mesh构建,mesh的构建主要需要顶点列表,三角形列表,法线列表.uv列表等 ...
- 关于Java的惰性求值
最近在学scala的时候,函数传参可以是传名参数,或者传值参数 1.Scala中的传名参数是什么意思?lazy关键字有什么作用? Scala官方文档的定义是:传名参数 仅在被使用时触发实际参数的求值运 ...
- ISTQB软件测试初级认证模拟题
参考地址 http://www.docin.com/p-297467364.html 第一章:软件测试基础(18%) 1.学习目标 1.1 为什么需要软件测试? (K2) ① 通过具体的例子,来描述软 ...