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 & ...
随机推荐
- 【Java学习Day06】注释种类、符号及用法
注释种类 单行注释:只能注释一行文字 多行注释:可以注释一段文字 文档注释:用来生成说明文件 注释符号及用法 单行注释:// //后面写注释 多行注释:/**/ /* 我是注释 我是注释 我是注释 * ...
- C# 两个list集合合并成一个,及升序降序
C# List集合合并 在开发过程中.数组和集合的处理是最让我们担心.一般会用for or foreach 来处理一些操作.这里介绍一些常用的集合跟数组的操作函数. 首先举例2个集合A,B. L ...
- 微信小程序搜索排名权重!
最后,再介绍一下排名权重的计算比例: 1.小程序上线时间(占比5%) 2.描述中完全匹配出现关键词次数越多,排名越靠前(10%) 3.标题中关键词出现1次,且整体标题的字数越短,排名越靠前(35%) ...
- Dockerfile CMD命令提示no such file
过程: 自制一个kafka镜像,启动时CMD命令报ERROR # 安装 kafka ADD kafka_2.12-2.4.1.tgz /home/pmish/software ENV KAFKA_HO ...
- Java反射解析注解
package com.jeeplus.config; import javax.validation.constraints.Size; import java.lang.annotation.An ...
- vue-购物车的部分
定义一个局部组件 分成三个部分 Vue.component('my-cart',{ template: ` <div class='cart'> <cart-title>< ...
- curl:(6) Could not resolve host: baidu.com; Unknown error
问题描述 有段时间没操作CentOS了,然后启动Virtualbox中的CentOS之后,发现网络不通,ping baidu.com 出现错误 curl:(6) Could not resolve h ...
- 【Python】容器:列表(list)/字典(dict)/元组(tuple)/集合(set)
三.Python容器:列表(list)/字典(dict)/元组(tuple)/集合(set) 1.列表(list) 1.1 什么是列表 是一个'大容器',可以存储N多个元素简单来说就是其他语言中的数组 ...
- 摩托罗拉IP PBX9000配置指南
400通话时,按数字键进行选择无效 打开IPB通信板界面,SIP终端参数--应用设置--点击RFC2833数值,默认禁用变更为101,(如有多个勾选批量,填写批量数值)--提交--保存修改 未完待续
- [AGC013B] Hamiltonish Path
个人思路: 随便从一个节点开始搜索,只要当前节点不满足条件,随便找一个与它有边相连,不在序列里的节点加入序列.因为要么中途停止,要么把所有节点遍历一遍,一定能找到一个端点. 我们直接从节点 \(1\) ...