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 ...
随机推荐
- Git 学习笔记——git checkout
上图是我对git常用用法的一个总结,今天这里主要解释上面操作中没有的 " git checkout "操作. =================================== ...
- vue之父组件与子组件
1.背景 2.简单使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 【树的直径 求树中距离跟阶段点最远的点】CodeForce1822F.md
CF1822F-Problem - F - Codeforces 题目大意:无根树的每条边为k,定义操作:移动根节点为把当前的根ROOT移动到相邻节点,每次代价为c, 定义成本=从ROOT出发到达的最 ...
- 屏蔽RaiDrive的广告
RaiDrive 广告域名:ads.raidrive.com 在 HOSTS 添加 127.0.0.1 ads.raidrive.com 或者在代理中设置为阻止即可. 效果: 补 最新版(2023.9 ...
- inline，static inline
https://blog.csdn.net/A_BCDEF_/article/details/89485894 inline 函数被调用时,需要出栈入栈.当函数频繁被调用时,则不断地有函数出栈入栈,会 ...
- 看了这几个C语言例子，你一定和我一样连说5个卧槽,声音一次比一次大
曾经我一直以为自己C语言学的还挺好的,直到看到这几个例子. 例1 首先来看一下,大师是如何求圆周率的,一口君实在词穷,first卧槽. #include <stdio.h> long a= ...
- 【CMake系列】06-项目结构与输出路径管理
为了对大型项目实现更好的管理[模块化协作开发等等],cmake 提供了很多指令,可以对项目的结构进行调整.管理,便于项目的合理规划.本文我们要学习的就是 项目结构的设置,以及 构建程序等 输出路径的设 ...
- 12米空间分辨率DEM数据申请下载：TanDEM-X数据集
本文介绍全球12米与30米高空间分辨率的数字高程模型(DEM)数据--TanDEM-X数据的下载申请方法. Tandem-X卫星项目于2010年6月启动,并于2010年6月21日和2010年1 ...
- TF-IDF 算法原理以及源码实现
TF-IDF(Term Frequency-Inverse Document Frequency),是用来衡量一个词在文档中的重要性,下面看一下TDF-IDF的公式: 首先是TF,也就是词频,用来衡量 ...
- JVM深入学习-ClassLoader篇(一)
初识JVM --- ClassLoader深入理解 ClassLoader.SPI机制 Class对象的理解 java在诞生之初,就有一次编译到处运行的名言,今天我们来探究一下,从java代码到cla ...