el-tree 懒加载复选框默认展开和默认选中
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }
组织树懒加载 多选组织树必须要加的属性
<el-tree
ref="showTree"
:data="data3" //所有的组织树的树形结构数据 必须要加
:load="loadData" // load是懒加载必须加的在点击的时候获取数据
show-checkbox // 看业务需求是否有复选框的需求
lazy //懒加载属性
check-on-click-node //只有在点击的时候才会选中复选框
@check="onCheckChange" //通过点击事件拿到默认展开的数据和默认选中的数据 拿到这两个数据给后端让后端保存 当前端需要回显的时候在一开始调用接口展示
node-key="id" //这个必须要有固定的id值 一方面完整渲染 一方面选中回显使用
:props="defaultProps"
:default-checked-keys="defaultCheckedNodes"
:default-expanded-keys="defaultExpandedKeys"
></el-tree>
<script>
export default {
data() {
return {
//这个字段是根据后端返回来的数据对应是哪个才可以 是树的渲染和使用
defaultProps: {
children: 'subAreas',
label: 'name',
isLeaf: 'leaf',
},
defaultExpandedKeys: [], //默认展开
defaultCheckedNodes: [], //默认选中
},
methods:{
//loadData 方法是对于懒加的使用当触发的时候会调用接口获取后端数据
loadData(node, resolve) {
if (node.level === 0) {
return
resolve([{ name: 'region' }]); }
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data =
[{ name: 'leaf', leaf: true },
{ name: 'zone' }]; resolve(data); },
500);
},
onCheckChange(data, node) {
console.log('onCheckChange', data, node)
this.halfCheckedKeys = node.halfCheckedKeys
this.checkedKeys = node.checkedKeys
}
}
}
</script>
对于组织树的默认展开和默认选中，其实归根结底就是一个，查看选中事件，返回来的值将返回的值赋值过去看看是否生效
el-tree 懒加载复选框默认展开和默认选中的更多相关文章
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...
- vue elementUi tree 懒加载使用详情
背景:vue下使用elementUI 文档:http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian 需求:只 ...
- element-ui表格带复选框使用方法及默认选中方法
一.实现多选:步骤1:在表格中添加一列 步骤2:在data中定义以及数组用来存储选中的元素.例如:multipleSelection:[] selection-change方法用户实时监听选中元素 实 ...
- JQ 动态加载多选框--随记
=====================html <table> <tr> <td style="Width: 100px; text-align: righ ...
- input checkbox复选框点击获取当前选中状态jquery
function checkAll(id) { //用is判断 // let checkStatus=$(id).is(':checked'); // console.log(checkStatus) ...
- jquery获取复选框（checkbox）的选中值（一组和单个）
使用jquery获取一组或者单个checkbox的选中状态的值.下面通过一个示例进行说明,假设现有一页面有一组checkbox的name的值为id,那么获取这组name=id的checkbox的值的方 ...
- ExtJs 4.2.1 复选框数据项动态加载(更新一下)
最近在做博客项目,后台管理用的是ExtJs4.2.1版本,因为是初学所以在使用的时候也遇到不少的这样或那样的问题,也写了不少这方面的博客,今天要写的博客是关于复选框数据项动态的加载功能,以前也没用过, ...
- easyui复选框树动态加载后台数据，实现自动选中数据库中数据。后台语言是.NET
最近公司做项目用到了easyui复选框树来实现加载不同类型产品.因为我刚刚毕业,现在也算是实习吧,所以一脸懵逼啊.在公司里的一个哥的帮助下 ,我写出来这个EasyUi复选框树了,虽然东西不难,但也是自 ...
- 织梦/dedecms 当文章转载时不需要设置图片水印的设置，取消’图片是否加水印‘的复选框，并且修改如下文件即可生效
当想添加水印是选中“图片是否加水印”复选框即可. 找到include/helpers/image.helper.php这个文件,在里面找到中的if( isset($GLOBALS['needwater ...
随机推荐
- 大语言模型内部运行原理 | LLM | 词向量 | Transformer | 注意力机制 | 前馈网络 | 反向传播
https://www.understandingai.org/p/large-language-models-explained-with https://arxiv.org/abs/1905.05 ...
- 《Python数据可视化之matplotlib实践》 源码 第一篇 入门 第一章
最近手上有需要用matplotlib画图的活,在网上淘了本实践书,发现没有代码,于是手敲了一遍,mark下. 第一篇 第一章 图1.1 import matplotlib.pyplot as p ...
- Dijkstra单源最短路模板
struct DIJ { using i64 = long long; using PII = pair<i64, i64>; vector<i64> dis; vector& ...
- springcloud feign集成hystrix
本章介绍feign集成hystrix 1.增加pom依赖` <dependency> <groupid>org.springframework.cloud</groupi ...
- 2022年第一天，体验了一把wan(皖)式服务
在新的一年到来之际, 一口君首先祝各位粉丝朋友新年快乐! 心想事成! 事业顺利! 阖家欢乐! 财源广进! 2022年的第一天,一口君带着家人去了躺马鞍山,享受了一下马鞍山的洗浴. 马鞍山桑拿虽然比不上 ...
- zabbix snmp OID 列表
系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...
- Go 互斥锁 Mutex 源码分析(二)
原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言 在 Go 互斥锁 Mutex 源码分析(一) 一文中分析了互斥锁的结构和基本的抢占互斥锁的场景.在学习锁的过程中,看的不少文章是基于锁的状态解释 ...
- MarginNote 4 内存泄露？
在床上用电脑的时候突然发现电脑风扇呼呼响,一摸很烫,以为是被子把出风口堵住了,于是调整角度继续用.结果一段时间之后风扇还是狂转不停,然后收到了这样的提示.不看不知道一看吓一跳,MarginNote 4 ...
- 将文件的换行符由 CRLF 转换为 LF
在 DOS/Windows 文本文件中,换行,也称为新行,是两个字符的组合:回车(CR)后跟一个换行(LF).在 Unix 文本文件中,一行的换行是单个字符:换行(LF).在 Mac 文本文件中,在 ...
- C语言中的数据类型及其转换
目录 计算机中的数据类型 整型数据之间的转换 相同字长之间的转换 小字长转大字长 大字长转小字长 int.float.double之间的转换 float->double double->f ...