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 ...
随机推荐
- 【Vue】Re07 插槽Slot
一.插槽基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 世界机器人大会 —— 人形机器人（humanoid）、双足机器人、四足机器人 —— 我国最大的机器人展览会
相关资料: https://www.bilibili.com/video/BV1iG411g7B4/ https://www.youtube.com/watch?v=8cJV08MTwA0 官网主页: ...
- 【转载】 NetworkManager——nmcli命令连接WIFI和创建热点
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/u014695839/article/de ...
- 国产深度学习框架吸引用户的一种免费手段——免费GPU时长
国产的深度学习框架基本成为了一个头部公司的标配了,不论是阿里.百度还是华为都推出了自己的深度学习框架,这几家公司为了吸引用户也都采取了免费使用GPU的活动,但是与阿里.百度的不同,华为是与固定的高校的 ...
- python版本的两款NVIDIA显卡管理查询工具
本文所述如题; 给出两个python版本的NVIDIA显卡管理查询工具 1. py3nvml github下载地址: https://github.com/fbcotter/py3nvml Requ ...
- 使用tensorbaoardx报错——Descriptors cannot not be created directly. If this call came from a _pb2.py file, your generated code is out of date and must be regenerated with protoc >= 3.19.0.
运行代码报错: from tensorboardX import SummaryWriter 报错内容: 发生异常: TypeError Descriptors cannot not be creat ...
- Docker不同宿主机网络打通
本方式使用docker Swarm集群的方式创建overlay 网络进行打通 背景 因java微服务使用nacos做配置中心,为了解决Nacos服务注册使用Docker容器内网ip问题,使用此方案 前 ...
- 使用 Microsoft Remote Desktop 远程连接 Windows
Windows 使用 Microsoft 帐户登录 远程连接时使用的用户名和密码是你的 Microsoft 帐户的用户名和密码 Windows 使用本地帐户登录 远程连接时使用的用户名和密码是你本地登 ...
- 全网最适合入门的面向对象编程教程：41 Python 常用复合数据类型-队列（FIFO、LIFO、优先级队列、双端队列和环形队列）
全网最适合入门的面向对象编程教程:41 Python 常用复合数据类型-队列(FIFO.LIFO.优先级队列.双端队列和环形队列) 摘要: 在 Python 中,队列(Queue)是一种常用的数据结构 ...
- win10自动更新导致的任务栏假死，右键单击任务栏延迟菜单延迟出现
系统是win10企业版,前天晚上回家之前,电脑还是好好的,然后前天早上跑过来以后,发现电脑自动重启了,我还以为是办公室停电了之类的(现在想了一下愚蠢,停电不会自动开机),没想到是自动更新 然后我发现, ...