文章目录

  • 描述
  • 问题
  • 解决

记录一个tsx 下el-tree的小问题

描述

在这里插入图片描述
在这里插入图片描述

  <Dialog v-model="showEdit" :title="t('button.edit')" width="900" :maxHeight="650"><el-form :model="nowdata" class="dialog"><el-form-item:label="t('col.Name_cn')":label-width="formLabelWidth"v-show="nowLocale != 'en' || isadd"><el-form-item :label="t('col.Permission')" :label-width="formLabelWidth"><!-- 权限设置 --><div class="custom-tree-node-container"><el-treeref="MenuRef"style="max-width: 600px":data="MenuData"show-checkboxnode-key="id"default-expand-all:expand-on-click-node="false":props="{class: customNodeClass,label: nowLocale == 'en' ? 'name_en' : 'name_cn'}"@node-click="nodeClick"/></div></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="showEdit = false">{{ t('button.cancel') }}</el-button><el-button type="primary" @click="doitemEdit()"> {{ t('button.ok') }} </el-button></div></template></Dialog>
MenuData:
[{"id":1,"parentid":0,"name_cn":"首页目录","name_en":"Home"},{...}]

点击编辑后 一个弹窗内设置菜单权限,那么问题往往是 控件的赋值取值。
即 RootItem 的 menuids 字段

roleData:
[{"id":4,"name_cn":"游客","name_en":"Guest","menuIds":"17,18"},{...}]

问题

取值(没有问题)
const MenuRef = ref()
const Submit=()={nowdata.value.menuIds = MenuRef.value.getCheckedKeys(true, true).toString()}
赋值(点击编辑 打开弹窗 无法赋值给tree。
-MenuRef.value 是underfined,没有挂起)
const doEdit = (index: number, role: RoleItem) => {MenuRef.value.setCheckedKeys(role.menuIds.split(','))
}

当然 setCheckedKeys、getCheckedKeys都是可以在文档里找到的
文档 https://element-plus.org/zh-CN/component/tree.html

解决

const doEdit = async (index: number, row: RoleItem) => {await nextTick()MenuRef.value.setCheckedKeys(row.menuIds.split(','))
}

简单的说,加了个异步状态,解决了。
虽然我设置settimeout 延迟两秒 也是没解决的,可能是因为我的tree在Dialog里的原因
真的是有点奇特的问题。

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

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux软件安装(JDK,Mysql,Nginx)

安装方式介绍一、安装JDKtar -zxvf jdk-17.0.10_linux-x64_bin.tar.gz -C /usr/localexport JAVA_HOME/usr/local/jdk-17.0.10export PATH$JAVA_HOME/bin:$PATHsource /etc/profile1、操作步骤二、mysql黑马视频已经安装好了我们只需开放指定端口就可以在navicat中连接了&#…

公有地址和私有地址

在计算机网络中&#xff0c;私有地址和公有地址是IP地址的两大重要分类&#xff0c;二者在网络通信中承担着不同角色。下面从定义、联系、区别和应用四个维度进行详细说明&#xff1a; 一、定义 1. 公有地址&#xff08;Public IP Address&#xff09; 公有地址是全球唯一且可在…

分治思想在系统分流削峰中的实践与Golang前沿实现

分治思想在系统分流削峰中的实践与Golang前沿实现 1. 分治思想概述 分治(Divide and Conquer)是计算机科学中一种重要的算法设计思想&#xff0c;其核心在于"分而治之"——将复杂问题分解为若干个规模较小的相同或相似子问题&#xff0c;递归地解决这些子问题&#x…

移动端视口终极解决方案:使用 Visual Viewport封装一个优雅的 React Hook

前言 在移动端开发中&#xff0c;视口高度一直是一个令人头疼的问题。尤其是在 iOS Safari 浏览器中&#xff0c;还有三星手机的导航遮挡&#xff0c;当虚拟键盘弹出时&#xff0c;视口高度的变化会导致固定定位元素错位、全屏布局异常等问题。本文将深入分析这个问题的本质&a…

react中key的作用

在 React 中&#xff0c;key 是一个特殊的属性&#xff08;prop&#xff09;&#xff0c;它的主要作用是帮助 React 识别哪些元素发生了变化、被添加或被移除&#xff0c;从而高效地更新和重新渲染列表中的元素。以下是 key 的具体作用和注意事项&#xff1a;1. 高效更新虚拟 D…

Lua学习记录 - 自定义模块管理器

为人所知的是lua自带的require函数加载脚本只会加载一次(就像unity里面的资源管理和AB包管理)&#xff0c;而主播调试习惯是用Odin插件的Button在unity编辑器模式里调试而非进入播放模式后调试&#xff0c;今天主播在做热更新相关的时候企图多次调用脚本打印以调试功能&#xf…

MongoDB 分片集群复制数据库副本

文章目录一、登录MongoDB查询数据库及集合分片情况二、登录MongoDB先创建副本数据库并设置数据库及集合分片功能三、登录MongoDB查询emop_slinkmain数据库main_repetition集合和四、使用mongodump压缩备份emop_slinkmain数据库中的main_repetition集合和shard_repetition 集合五…

SQLite 加密与不加密性能对比与优化实践

在项目中&#xff0c;为了保证数据安全&#xff0c;我们可能会对 SQLite 数据库进行加密&#xff08;例如使用 SQLiteMC/SQLCipher&#xff09;。然而&#xff0c;加密数据库在带来安全性的同时&#xff0c;也会带来显著的性能损耗。本文结合实测与源码分析&#xff0c;介绍 SQ…

Azure官网为何没直接体现专业服务

微软Azure官网没有直接、醒目地展示其专业服务&#xff08;如迁移、定制化解决方案咨询等&#xff09;&#xff0c;确实容易让人疑惑。这背后其实是微软Azure特定的市场策略和商业模式。下面我为你解释原因&#xff0c;并告诉你怎么找到这些服务。&#x1f9e9; 核心原因&#…

人体生理参数信号采集项目——心电信号

1.硬件——焊接调试趣事&#xff1a;由于测量手法问题&#xff0c;以及对示波器不太熟悉&#xff0c;差点以为没信号&#xff0c;都打算重焊一块板子了&#xff0c;但&#xff0c;实际上&#xff0c;信号输出是相对完美的&#xff1b;遇到的疑难杂症&#xff1a;1&#xff09;5…

Go1.25的源码分析-src/runtime/runtime1.go(GMP)g

1. 主要组成部分 Go语言的GMP调度器基于四个核心数据结构&#xff1a;g、m、p和schedt。 1.1 主要常量解读 1.1.1G 状态常量 const (_Gidle iota //刚分配尚未初始化的 G_Grunnable//已在运行队列上&#xff0c;未执行用户代码&#xff1b;栈未被该 G 拥有_Grunning//正在…

使用jwt+redis实现单点登录

首先理一下登录流程 前端登录—>账号密码验证—>成功返回token—>后续请求携带token---->用户异地登录---->本地用户token不能用&#xff0c;不能再访问需要携带token的网页 jwt工具类 package com.nageoffer.shortlink.admin.util;import cn.hutool.core.util.…

Trae配置rules与MCP

这个文章不错&#xff0c;不过如果只是看&#xff0c;还感受不到作者的震撼&#xff0c;所以我自己实操了一下&#xff0c;深受震动&#xff0c;也希望看到这篇文章的人也自己实操一下。 与Cursor结对编程的四个月&#xff0c;我大彻大悟了&#xff01; 学到了什么 无论是熟悉…

对抗攻击与防御:如何保护视觉模型安全?

对抗攻击与防御:如何保护视觉模型安全? 前言 一、对抗攻击的基本原理 二、对抗攻击的主要类型 2.1 白盒攻击 2.2 黑盒攻击 三、对抗攻击的常见形式 3.1 定向攻击 3.2 非定向攻击 四、对抗防御的核心思路 五、常见的对抗防御方法 5.1 对抗训练 5.2 输入预处理 5.3 防御蒸馏 六…

区块链开发:Solidity 智能合约安全审计要点

本文聚焦区块链开发中 Solidity 智能合约的安全审计要点。首先概述智能合约安全审计的重要性&#xff0c;接着详细介绍常见的安全漏洞&#xff0c;如重入攻击、整数溢出与下溢等&#xff0c;以及对应的审计方法。还阐述了审计的具体流程&#xff0c;包括自动化工具检测、手动代…

C++ 新手第一个练手小游戏:井字棋

1. 引言 介于身边有特别多没有学习过编程&#xff0c;或者有一定C语言、python或是Java基础的但是没有接触过C的新手朋友&#xff0c;我想可以通过一个很简单的小项目作为挑战&#xff0c;帮助大家入门C。 今天&#xff0c;我们将挑战一个对新手来说稍微复杂一点&#xff0c;…

透射TEM 新手入门:快速掌握核心技能

目录 简介​ 一、TEM 基本知识 1. 核心原理&#xff08;理解图像本质&#xff09;​ 2. 关键结构与成像模式&#xff08;对应图像类型&#xff09;​ 二、TEM 数据处理 1. 预处理&#xff08;通用步骤&#xff09;​ 2. 衍射花样&#xff08;SAED&#xff09;处理&#x…

day075-MySQL数据库服务安装部署与基础服务管理命令

文章目录0. 老男孩思想-老男孩名言警句1. 数据库服务安装部署1.1 下载安装包1.2 系统环境准备1.2.1 关闭防火墙1.2.2 关闭selinux1.2.3 安装依赖软件1.2.4 卸载冲突软件1.3 安装程序1.3.1 上传软件包1.3.2 配置环境变量1.3.3 创建数据库存储数据目录1.3.4 创建数据库程序管理用…

Qt二维码生成器项目开发教程 - 从零开始构建专业级QR码生成工具

Qt二维码生成器项目开发教程 - 从零开始构建专业级QR码生成工具 项目概述 本项目是一个基于Qt框架开发的专业级二维码生成器&#xff0c;集成了开源的qrencode库&#xff0c;提供完整的QR码生成、预览、保存和分享功能。项目采用C语言开发&#xff0c;使用Qt的信号槽机制实现…

LLaVA-3D,Video-3D LLM,VG-LLM,SPAR论文解读

目录 一、LLaVA-3D 1、概述 2、方法 3、训练过程 4、实验 二、Video-3D LLM 1、概述 2、方法 3、训练过程 4、实验 三、SPAR 1、概述 2、方法 4、实验 四、VG-LLM 1、概述 2、方法 3、方法 4、实验 一、LLaVA-3D 1、概述 空间关系不足&#xff1a;传…