nextTick的原理

news2025/7/4 7:51:32

在这里插入图片描述
开发中有这么一个需求,回显的适合,el-tree的检查严格标志属性更新为true。当更新完成后,又要改为false。还原。


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

<script>
export default {
  methods: {
    async initData() {
      let type = "edit";
      if (type == "edit") {
        this.checkStrictly = true; //回显的时候设置为父子之间 
        this.$nextTick(() => {
          // 这里相当于在检查严格标志设置后再一次更新
          this.$refs.tree.setCheckedKeys([3, 7]);
        });
        this.$nextTick(() => {
          //在赋予默认值后,再次更新。
         this.checkStrictly = false;
        });
      }
    },
  },

  data() {
    return {
      checkStrictly: false, //没有界限,就是父子是一家
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {
    console.log("创建后");
    this.initData();
  },
};
</script>

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

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

相关文章

[LLM]大模型训练(三)--DeepSpeed-Train

安装DeepSpeed与集成 pip install deepspeed DeepSpeed与HuggingFace Transformers直接集成。使用者可以通过在模型训练命令中加入简单的 --deepspeed 标志和配置文件&#xff0c;来轻松加速模型训练。 编写DeepSpeed模型 DeepSpeed模型训练的核心是什么&#xff1f;它如何处…

极智开发 | 解读英伟达软件生态 深度神经网络库cuDNN

欢迎关注,获取我的更多经验分享 大家好,我是极智视界,本文来介绍一下 解读英伟达软件生态 深度神经网络库cuDNN。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码下载,链接:https://t.zsxq.com/0aiNxERDq cuDNN,全称为 NVIDIA CUDA Deep Neural Net…

[设计模式 Go实现] 创建型~抽象工厂模式

抽象工厂模式用于生成产品族的工厂&#xff0c;所生成的对象是有关联的。 如果抽象工厂退化成生成的对象无关联则成为工厂函数模式。 比如本例子中使用RDB和XML存储订单信息&#xff0c;抽象工厂分别能生成相关的主订单信息和订单详情信息。 如果业务逻辑中需要替换使用的时候…

Spring Data Redis对象缓存序列化问题

相信在项目中&#xff0c;你一定是经常使用 Redis &#xff0c;那么&#xff0c;你是怎么使用的呢&#xff1f;在使用时&#xff0c;有没有遇到同我一样&#xff0c;对象缓存序列化问题的呢&#xff1f;那么&#xff0c;你又是如何解决的呢&#xff1f; Redis 使用示例 添加依…

nodejs微信小程序+python+PHP的冷链物流配送系统-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

【嵌入式开发 Linux 常用命令系列 7.3 -- linux 命令行数值计算】

文章目录 linux 命令行数值计算使用 awk使用 bc 命令使用 Bash 的内置算术扩展使用 expr脚本命令实现 linux 命令行数值计算 在 Linux 命令行中&#xff0c;您可以使用多种方法来执行基本的数学运算。以下是一些示例&#xff1a; 使用 awk awk 是一个强大的文本处理工具&…

如何优化旋转花键的装配方式?

花键轴与花键套的装配在工业上广泛应用&#xff0c;装配的质量受花键轴与花键套间的接触状态、对应的受力情况及相对位置关系影响&#xff0c;那么&#xff0c;我们应该如何优化旋转花键的装配方式呢&#xff1f; 确保轴和孔的配合精度是关键&#xff0c;可以采用高精度的加工和…

基于Python的电商手机数据可视化分析和推荐系统

1. 项目简介 本项目旨在通过Python技术栈对京东平台上的手机数据进行抓取、分析并构建一个简单的手机推荐系统。主要功能包括&#xff1a; 网络爬虫&#xff1a;从京东获取手机数据&#xff1b;数据分析&#xff1a;统计各厂商手机销售分布、市场占有率、价格区间和好评率&am…

15.备份与恢复

目录 1、数据备份 1、使用MySQLdump 命令备份 2、使用MySQLdump备份数据库中的某个表 3、使用MySQLdump备份多个数据库 4、直接复制整个数据库目录 2、数据恢复 1 、使用MySQL命令恢复 2、直接复制到数据库目录 3、表的导入导出 1、 使用SELECT ... INTO OUTFILE导出…

PHP序列化总结3--反序列化的简单利用及案例分析

反序列化中生成对象里面的值&#xff0c;是由反序列化里面的值决定&#xff0c;与原类中预定义的值的值无关&#xff0c;穷反序列化的对象可以使用类中的变量和方法 案例分析 反序列化中的值可以覆盖原类中的值 我们创建一个对象&#xff0c;对象创建的时候触发了construct方…

企业计算机服务器中了360后缀勒索病毒如何处理,勒索病毒应对步骤

网络技术的应用与发展&#xff0c;为企业的生产运营提供了有力保障&#xff0c;但也为网络安全威胁埋下隐患。近期&#xff0c;网络上的勒索病毒非常嚣张&#xff0c;严重影响了企业的生产运营。近日&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服…

javascript 常见事件

简介&#xff1a; JavaScript&#xff08;简称“JS”&#xff09;是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名&#xff0c;但是它也被用到了很多非浏览器环境中&#xff0c;JavaScript基于原型编程、多范式…

Qt Creator可视化交互界面exe快速入门5

上一期介绍了加法计算器,本期介绍QObject定时器。 首先一样先建个工程,比如我这项目名为QObject 本期的任务就是制作图片在界面上显示,然后每秒定时切换,点击另一个暂停按钮,可以定格当前图片,即取消定时切换功能。 显示图片的我们可以使用显示里面的label 这个用于显示…

跨境电商:平台选择的艺术与科学

一、平台类型与特点 亚马逊&#xff1a;作为全球最大的电商平台之一&#xff0c;亚马逊拥有庞大的用户群体和完善的物流体系。它以优质的服务和高效的配送著称&#xff0c;但竞争也相对激烈。eBay&#xff1a;eBay是一个全球性的在线拍卖和购物网站&#xff0c;它的市场覆盖面…

修改源码,element的el-table合并,处理合并产生的hover样式问题

1、确认自己element-ui的版本号 2、此element-ui下的lib包是修改过hover样式的包,如何替换自己文件下的node_modules中的包 修改后将lib文件夹中文件替换你项目中/node_module/element-ui/Lib中的文件问题??如果替换开发环境中的node_module的包无法升级到测试环境,因为nod…

【Linux操作系统】探秘Linux奥秘:用户、组、密码及权限管理的解密与实战

&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《操作系统实验室》&#x1f516;诗赋清音&#xff1a;柳垂轻絮拂人衣&#xff0c;心随风舞梦飞。 山川湖海皆可涉&#xff0c;勇者征途逐星辉。 目录 &#x1fa90;1 初识Linux OS &…

[C#]C# winform实现imagecaption图像生成描述图文描述生成

介绍&#xff1a; 地址&#xff1a;C#https://github.com/ruotianluo/ImageCaptioning.pytorch 效果&#xff1a; 测试环境&#xff1a; vs2019 onnxruntime1.16.3 opencvsharp4.8 代码&#xff1a; using System; using System.Collections.Generic; using System.Comp…

QT 利用开源7z 实现解压各种压缩包,包括进度条和文件名的显示(zip,7z,rar,iso等50多种格式)

想做一个winRAR一样的解压软件吗?很简单,利用开源的7z库就能实现。我看网上其他人说的方法不敢苟同,误人子弟。以前自己在项目中使用过7z,这次又有需要,就想记录下来。如果你研究过如何用7z的话,一定知道7z的每一个GUID都代表了一种格式,50多种GUID也就有50多个格式,最…

2023 年中国金融级分布式数据库市场报告:TiDB 位列领导者梯队,创新能力与增长指数表现突出

近日&#xff0c;沙利文联合头豹研究院发布了中国数据库系列报告之《2023 年中国金融级分布式数据库市场报告》。 报告认为&#xff0c;金融行业对于分布式数据库信任度与认可度正在逐步提高&#xff0c;中国金融级分布式数据库市场正处于成熟落地的高增长阶段&#xff0c;行业…

自激振荡电路笔记 电弧打火机

三极管相关 三极管的形象描述 二极管 简单求解&#xff08;理想&#xff09; 优先导通&#xff08;理想&#xff09; 恒压降 稳压管&#xff08;二极管plus&#xff09; 基础工作模块 理想稳压管的工作特性 晶体管之三极管(“两个二极管的组合” ) 电弧打火机电路 1.闭合开…