el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点,以及通过setChecked新增勾选指定节点

news2025/1/19 7:54:26

实现目标:在生成el-tree时,默认勾选其中某几个选项;或在进行某个选项的选中时,同时勾选上另一个选项。

实现效果:

在生成树结构时,默认勾选其中的两个选项。

在勾选其中一个选项时,另一个选项也被同时勾选。

实现方法:

<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

一、设置生成el-tree时默认勾选:两种方法

1.通过node设置

setCheckedNodes设置目前勾选的节点,使用此方法必须设置 node-key 属性(nodes) 接收勾选节点数据的数组
setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },

2.通过key设置 :里面为数组

setCheckedKeys通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性(keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true 则仅设置叶子节点的选中状态,默认值为 false
setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3, 5]);
      },

二、在勾选某一选项时,另一个选项也默认被勾选

勾选一个选项所触发的事件为:

check-change节点选中状态发生变化时的回调共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps"
  @check-change="handleCheckChange" // 这一行为选中某选项所执行的方法
>
</el-tree>

另一个选项也默认被勾选: 

setChecked通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false
handleCheckChange(data, checked, indeterminate) {
        checked ? this.aMethods(data, true) : this.aMethods(data, false)

      },
aMethods(item,bool){
 if(bool){
    this.$refs.tree.setChecked(5, true)
 }else{
    this.$refs.tree.setChecked(5, false)
   }
}

这样就实现了上述效果。更多内容可参考Element官网。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409014.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微前端之 qiankun 入门、上手、实战(构建大型 web 应用)

目录 前言 正文 一、介绍 微前端 qiankun 二、快速上手 ​☛主应用 ① 安装 qiankun ② 在主应用中注册微应用 ​☛微应用 ① 导出相应的生命周期钩子 ② 配置微应用的打包工具 三、项目实战 ​☛主应用 ① 安装 qiankun ② 注册微应用并启动 ③ 主应用添加…

ES6--》对象扩展方法

目录 对象扩展 name 属性 属性的遍历 super关键字 Object.is() Object.assign() Object.getOwnPropertyDescriptors() Object.setPrototypeOf() Object.getPrototypeOf() Object.keys()、Object.values、Object.entries()、Object.fromEntries() Object.hasOwn() 对…

如何在 2022 年为 Web 应用程序选择技术堆栈

文章目录什么是技术堆栈&#xff1f;为 Web 开发选择技术堆栈时要考虑的事项选择熟悉的技术跟随趋势考虑项目的细节确保高安全级别记住你的最后期限选择前端技术栈框架编程语言选择后端技术栈编程语言数据库技术堆栈是您应用程序的核心选择最佳的 Web 应用程序堆栈并非易事&…

vue3+ts遇到的小问题

插件volar安装了没有提示。 解决&#xff1a;1. 检查是或否是最新的版本&#xff0c;是的话进入拓展设置&#xff0c;所有的选项都勾选 2. 还是不行就要更新vscoe了。一般的话会在力捕抓到一个错误。跟新就好了 TypeScript intellisense is disabled on template. To enab…

【简陋Web应用2】人脸检测——基于Flask和PaddleHub

文章目录&#x1f6a9; 前言&#x1f33a; 效果演示&#x1f966; 分析与设计&#x1f349; 实现&#x1f36c; 1. 部署人脸检测模型&#x1f36d; 2. 使用Flask构建app2.1 目录结构2.2 forms.py2.3 utils.py2.4 app.py2.5 index.html&#x1f95d; Bug(s)&#x1f6a9; 前言 本…

Vue根据网络文件路径下载文件【自定义属性 v-down】

Vue根据网络文件路径下载文件【v-down】标准使用方式企业级Vue开发集成(全局挂载)1.src目录下创建directive文件夹&#xff08;存在则忽略&#xff09;2.down.js文件3.directive根目录创建index.js文件4.main.js 注册自定义属性全局挂载提到下载文件大家首先肯定会想到 模拟点击…

vue2 使用 cesium 篇 【第一篇】

vue2 使用 cesium 篇 今天好好写一篇哈&#xff0c;之前写的半死不活的。首先说明&#xff1a;这篇博文是我边做边写的&#xff0c;小白也是&#xff0c;实现效果会同时发布截图&#xff0c;如果没有实现也会说明&#xff0c;仅仅作为技术积累&#xff0c;选择性分享&#xff0…

面试官:“ES6中新增的Set方法去重你会吗?”我:“看文章就知道了”

赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。 面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏 。 文章目录 Set 的基本使用🍔前言🍏正文1. Set1.1 Set的基本使用1.2 Set 常见的属相和方法1.3 应用场景:使用Set对数…

vue组件通信2 | 父子组件通信v-model

引言&#xff1a;最近项目在vue2 升级vue3 &#xff0c;在这个过程中发现v-model 的变化最大。同时也发现了对于v-model 的不熟悉。 因此&#xff0c;本文从文档、vue2的使用方法、vue2 tsx 的使用方法、vue3的使用方法、使用场景来试图探究一下v-model。 一、文档及vue2中 v-…

vue页面刷新

vue页面刷新 首先我们都知道vue属于单页面应用&#xff0c;默认境况下是不会触发刷新页面操作的&#xff0c;所以这个时候就需要我们通过事件来触发reload()来达到刷新操作 接下来我就为大家介绍三种刷新页面的方法 1. wiindow.location.reload([bForceGet])该方法强迫浏览…

vue中组件的name属性含义与用法

vue中组件的name属性含义与用法 name属性&#xff1a;只有作为组件选项时起作用&#xff0c;用来注册组件名 1、注册组件名 局部注册组件&#xff0c;语法&#xff1a;export default{ components:{"组件名":组件对象}} 其中&#xff0c;"组件名"注册方…

从0搭建Vue3组件库(五): 如何使用Vite打包组件库

本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) 打包配置 vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及vitejs/plugin-vue pnpm add vite vitejs/plugin-vue -D -w 在 componen…

基于Vue+Nodejs实现宿舍管理系统

​ 作者主页&#xff1a;编程指南针简介&#xff1a;Java领域优质创作者、CSDN博客专家 Java项目、简历模板、学习资料、面试题库、技术互助文末获取源码​ 项目编号&#xff1a;BS-QD-002 主要需求&#xff1a; 学生信息录入、修改、删除、查询宿舍管理评分学生早起率、懒…

js之promise

##### 仅做记录复习使用 #### 数据有点混乱 暂时不要看 promise promise是一个对异步操作进行封装并返回其结果的构造函数. 使代码更加简洁和避免回调地狱。 promise是浏览器引擎自带的&#xff08;但不是所有浏览器都支持promise&#xff09; promise的参数是一个函数且…

全网详细解决Set-Location : 找不到接受实际参数“xxx”的位置形式参数。 所在位置 行:1 字符: 1的错误,并深究该错误的原因。

文章目录1. 复现错误2. 分析错误3. 解决问题4. 文末总结1. 复现错误 今天使用PowerShell从C:\Users\baoya>目录切换到C:\Program Files\MySQL\MySQL Server 5.7\bin时&#xff0c;却报出如下图的错误&#xff1a; 即找不到接受实际参数“Files\MySQL\MySQL”的位置形式参数。…

vue最易理解且详细的调用swiper插件

我们最开始接触的是在操作dom时候的时候引入swiper,那么这次我就用之前的文档来教你在vue中如何调用swiper. 我们之前看的是swiper教程 那么我根据上面的教程一步一步来教你使用 1.首先创建好swiper组件.写好template 里面的标签内容(当然这里写了个插槽为了以后方便动态插入…

【跨域】一篇文章彻底解决跨域设置cookie问题!

一篇文章彻底解决跨域设置cookie问题&#xff01; 大家好我是雪人~~⛄ 之前做项目的时候发现后端传过来的 SetCookie 不能正常在浏览器中使用。 是因为谷歌浏览器新版本Chrome 80将Cookie的SameSite属性默认值由None变为Lax。 接下来带大家解决该问题。 原理讲解 我们可以看到…

Java - token的存储与获取

1. 获取token的工具类 问&#xff1a;为什么写工具类呢&#xff1f;&#xff1f;&#xff1f; 答&#xff1a;因为我们不知道前端将token怎么存储的&#xff0c;所以我们可以通过调用Token工具类来获取token。Token工具类会检查header、URL中的属性值、以及Cookie等等&#xff…

快速生成Vue2或者vue3模板

1.点击文件&#xff0c;再点击首选项&#xff0c;然后选择用户片段&#xff1b; 2.在弹出来的输入框中&#xff0c;选择第一行vue.json或者第二行新建全局代码片段文件都可&#xff0c;都是为了打开vue.json文件&#xff1b; 3.把下面代码复制到vue.json文件里&#xff0c;然后…

vue3搭建教程(基于vite+create-vue+ element-plus)

前言2021年8月5日&#xff0c;Vue正式发布3.2版本&#xff0c;同时&#xff0c;Vue的作者尤雨溪还在个人微博称&#xff1a;“ < script setup > TS Volar 真香 ”&#xff1b;2022年1月22日&#xff0c;Vue官方宣布Vue3成为了新的默认版本。如今的Vue3已经势不可挡&a…