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 ...
随机推荐
- Windows/Linux上更新Nessus插件
破解版:http://ximcx.cn/post-151.html 官网文档: https://docs.tenable.com/sccv/Content/OfflineNessusPluginUpd ...
- 论文写作：写回复意见时的套话 (reviews and comments)
Typos, Grammar, and Citation Errors: We acknowledge the need for a thorough proofreading to rectify ...
- "观察者" 网站上不错的对社会问题进行思考的文章--------------- 分享
原文地址: https://www.guancha.cn/weichengling 在网上无意中到了下面的文章,对社会热点问题有较为全面的思考,感觉不错,分享一下. ------------ ...
- 强化学习算法真的适合于你的应用吗 —— 强化学习研究方向(研究领域）现有的不足（短板、无法落地性） —— Why You (Probably) Shouldn’t Use Reinforcement Learning
外文原文: Why You (Probably) Shouldn't Use Reinforcement Learning 地址: https://towardsdatascience.com/why ...
- vue之es6语法
1.背景 2.let与var与const的区别 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- PKUSC2019 D1T1 题解
前言 五一网课的例题,但是网上没有详细的题解(其实就是都没放代码),所以来写一篇,就当攒 RP 了.题目可以在这里(不强制在线)或这里(强制在线)提交. 题目简述 有 \(n\)(\(n \leq 5 ...
- Committer 迎新！这次是来自阿里云的同学
截至今天,Apache DolphinScheduler 项目在 GitHub 上的 Star 数已突破 10.6K,贡献者人数也突破了 470 人.社区的不断壮大,离不开每位 Contributor ...
- 最短小精悍的js数组打乱顺序
let number = [1, 45, 13, 17]; // 封装一个打乱数组的方法 function getarr(arr) { return ...
- manim边学边做--直线类
直线是最常用的二维结构,也是构造其他二维图形的基础.manim中针对线性结构提供了很多模块,本篇主要介绍常用的几个直线类的模块. Line:通用直线 DashedLine:各种类型的虚线 Tangen ...
- 一篇文章讲清楚Java中的反射
介绍 每个类都有一个 Class 对象,包含了与类有关的信息.当编译一个新类时,会产生一个同名的 .class 文件,该文件内容保存着 Class 对象. 类加载相当于 Class 对象的加载.类在第 ...