当前位置: 首页 > news >正文

Vue+Element ui Study

目录

一、Vue+Element ui

1、show-overflow-tooltip属性设置宽度

2、this.$refs使用方法

Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“


一、Vue+Element ui

1、show-overflow-tooltip属性设置宽度

:show-overflow-tooltip="true",该属性可以让内容在一行显示,如果显示不下时,显示...,并且鼠标划过时显示全部文字。

现在需求是:调整显示全部文字的宽度。

样式代码如下:可以在全局添加这样全部生效,如果不想加在全局的话,可以单独加在页面当中,但是切记修改elementui自带样式的话,不能在<style scoped></style>中修改,因为不会生效。

<style lang="scss">
.el-tooltip__popper {max-width: 800px;//max-width: 60%;
}
</style>

2、this.$refs使用方法

this.$refs
在vue中ref可以以属性的形式添加给标签或者组件

ref 写在标签上时:this.$refs.editValue 获取的是添加了ref="editValue"标签对应的dom元素

ref 写在组件上时:this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件

<template>//给标签使用<input type="text" ref="editValue"/>//给组件使用<comp-detail ref="component"></comp-detail><button @click="confirm">确定</button>
</template>methods:{confirm(){console.log(this.$refs.editValue.value)  //打印出输入框中的value值this.$refs['component'].init()     //调用组件comp-detail中的init()方法}
}

-----使用过程我报错如下

Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“

翻译大概就是:

v-on处理程序中出现错误:“TypeError:无法读取未定义的属性(读取'xxx')”

但是,实际上我是调用自定义组件中的方法

解决方案:

原因是因为调用方法的时候,实际值虽然初始化了,但是实际上还没渲染到dom上,因此应该改使用nextTick,即等元素被初始化成功后才进行调用方法。


this.dialogVisible =true
this.$nextTick(()=>{this.$refs.component.setValue('你好')   //调用setValue方法
})

Element官方

天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。

相关文章:

Vue+Element ui Study

目录 一、VueElement ui 1、show-overflow-tooltip属性设置宽度 2、this.$refs使用方法 Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“ 一、VueElement ui 1、show-overflow-tooltip属性设置宽度 :show-overflow-toolti…...

JAVA基础-多线程入门(详解)

目录 引言 一&#xff0c;线程概念 二&#xff0c;创建线程 2.1&#xff0c;继承Thread类&#xff0c;重写run方法 2.2&#xff0c;实现Runnable接口&#xff0c;重写run方法&#xff0c;实现Runnable接口的实现类的实例对象作为Thread构造函 数的target 2.3&#xff0c;通…...

Cirno‘s Perfect Equation Class 2023牛客暑期多校训练营5 D

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;有q次询问&#xff0c;每次给出三个整数k&#xff0c;c&#xff0c;n&#xff0c;求有多少满足条件的数对&#xff08;a&#xff0c;b&#xff09;满足kabc且c是b的倍数&#xff0c;且gcd(a,b)>n 1<q<100;…...

pytorch学习——如何构建一个神经网络——以手写数字识别为例

目录 一.概念介绍 1.1神经网络核心组件 1.2神经网络结构示意图 1.3使用pytorch构建神经网络的主要工具 二、实现手写数字识别 2.1环境 2.2主要步骤 2.3神经网络结构 2.4准备数据 2.4.1导入模块 2.4.2定义一些超参数 2.4.3下载数据并对数据进行预处理 2.4.4可视化数…...

PySpark 数据操作

数据输入 RDD对象 如图可见&#xff0c;PySpark支持多种数据的输入&#xff0c;在输入完成后&#xff0c;都会得到一个&#xff1a;RDD类的对象 RDD全称为&#xff1a;弹性分布式数据集&#xff08;Resilient Distributed Datasets&#xff09; PySpark针对数据的处理&…...

FPGA2-采集OV5640乒乓缓存后经USB3.0发送到上位机显示

1.场景 基于特权A7系列开发板&#xff0c;采用OV5640摄像头实时采集图像数据&#xff0c;并将其经过USB3.0传输到上位机显示。这是验证数据流能力的很好的项目。其中&#xff0c;用到的软件版本&#xff0c;如下表所示&#xff0c;基本的硬件情况如下。该项目对应FPGA工程源码…...

亚信科技AntDB数据库专家参加向量数据库首次技术标准研讨会

2023年7月19日下午&#xff0c;中国通信标准化协会大数据技术标准推进委员会数据库与存储工作组&#xff08;CCSA TC601 WG4&#xff09;联合中国信通院数据库应用创新实验室&#xff08;CAICT DBL&#xff09;在线上召开《向量数据库技术要求》标准首次研讨会。本次会议由中国…...

Windows中实现右键把电子书通过邮件发到kindle

不使用第三方软件&#xff0c;通过Windows自带的函数&#xff0c;可以实现右键将电子书通过电子邮件发送到kindle邮箱&#xff0c;从而实现kindle电子书传送功能。实现过程如下&#xff1a; 1. 使用bat添加右键功能 打开资源管理器&#xff0c;在地址中输入%APPDATA%\Microso…...

Three.js之创建3D场景

参考资料 【G】Three.js官方文档&#xff1a;https://threejs.org/docs/ Three.js是一个流行的WebGL库&#xff0c;官方文档提供了详细的API参考和示例&#xff0c;适合学习和参考。【G】Three.js GitHub链接&#xff1a;https://github.com/mrdoob/three.js 这是一个流行的基…...

一个3年Android的找工作记录

作者&#xff1a;Petterp 这是我最近 1个月 的找工作记录&#xff0c;希望这些经历对你会有所帮助。 有时机会就像一阵风&#xff0c;如果没有握住&#xff0c;那下一阵风什么时候吹来&#xff0c;往往是个运气问题。 写在开始 先说背景: 自考本&#xff0c;3年经验&#xff0…...

CAS原理解析

CAS是一种乐观锁机制&#xff0c;一种比较并交换的过程和理念&#xff0c;用来解决线程安全问题&#xff0c;具体来讲就是对共享变量值的安全更新机制。能够保证原子、可见、一致性。这种交换过程是在Unsafe类中实现。 从一段简单的代码开始来对源码做分析 public static void…...

SQL项目实战:银行客户分析

大家好&#xff0c;本文将与大家分享一个SQL项目&#xff0c;即根据从数据集收集到的信息分析银行客户流失的可能性。这些洞察来自个人信息&#xff0c;如年龄、性别、收入和人口统计信息、银行卡类型、产品、客户信用评分以及客户在银行的服务时间长短等。对于银行而言&#x…...

【Redis深度专题】「核心技术提升」探究Redis服务启动的过程机制的技术原理和流程分析的指南(集群指令分析—实战篇)

探究Redis服务启动的过程机制的技术原理和流程分析的指南&#xff08;集群指令分析—下篇&#xff09; Cluster XX的集群指令&#xff08;扩展&#xff09;写入记录主节点和备节点切换-CLUSTER FAILOVER新加入master节点新加入slave节点为slave节点重新分配master分配哈希槽删除…...

ubuntu

安装 sudo apt-get update sudo apt-get install mysql-server mysql-client 设置root密码 cat /etc/mysql/debian.cnf 查看默认密码 mysql -u debian-sys-maint -p 连接输入密码 use mysql; select user,plugin from user; update user set pluginmysql_native_passwor…...

【芯片设计- RTL 数字逻辑设计入门 3- Verdi 常用使用命令】

文章目录 Verdi 全局显示Verdi 前导 0 的显示Verdi 数据笔数统计Verdi 波形数据dump Verdi 全局显示 bsubi -n 16 -J sam visualizer -tracedir ./veloce.wave/debug_waveform.stw 打开波形后&#xff0c;如果想要看到所有信号的数据&#xff0c;可以点击下图中红框中的按钮&a…...

python-pytorch基础之cifar10数据集使用图片分类

这里写目录标题 总体思路获取数据集下载cifar10数据解压包文件介绍加载图片数字化信息查看数据信息数据读取自定义dataset使用loader加载建模训练测试建测试数据的loader测试准确性测试一张图片读取一张图片加载模型预测图片类型创建一个预测函数随便来张马的图片结果其他打开一…...

华纳云:linux下磁盘管理与挂载硬盘方法是什么

在Linux下进行磁盘管理和挂载硬盘的方法如下&#xff1a; 磁盘管理&#xff1a; a. 查看已连接的磁盘&#xff1a;可以使用命令 fdisk -l 或 lsblk 查看系统中已连接的磁盘信息&#xff0c;包括硬盘和分区。 b. 创建分区&#xff1a;如果磁盘是全新的&#xff0c;需要使用 f…...

ChatGPT + Stable Diffusion + 百度AI + MoviePy 实现文字生成视频,小说转视频,自媒体神器!(一)

ChatGPT Stable Diffusion 百度AI MoviePy 实现文字生成视频&#xff0c;小说转视频&#xff0c;自媒体神器&#xff01;(一) 前言 最近大模型频出&#xff0c;但是对于我们普通人来说&#xff0c;如何使用这些AI工具来辅助我们的工作呢&#xff0c;或者参与进入我们的生活…...

linux strcpy/strncpy/sprintf内存溢出问题

本文主要介绍strcpy/strncpy/sprintf都是不安全的&#xff0c;可能存在内存溢出的问题。下来进行实例分析。 strcpy代码&#xff1a; #include <stdio.h> #include <string.h> #include <stdlib.h> #include <stdbool.h>void test_func(char *str) {b…...

Jmeter如何添加插件

一、前言 ​ 在我们的工作中&#xff0c;我们可以利用一些插件来帮助我们更好的进行性能测试。今天我们来介绍下Jmeter怎么添加插件&#xff1f; 2023最新Jmeter接口测试从入门到精通&#xff08;全套项目实战教程&#xff09; 二、插件管理器 ​ 首先我们需要下载插件管理器j…...

AGV如何实现自主避障

下面按“传感器→建模→算法→安全机制→工程实现”的顺序&#xff0c;把AGV自主避障讲清楚。 一、整体架构概览 AGV要“自己绕开障碍”&#xff0c;至少要做三件事&#xff1a; 1&#xff09;感知&#xff1a;知道“我在哪”“周围有什么”&#xff1b; 2&#xff09;规划&…...

单细胞测序技术原理与应用进展

一、技术发展背景与核心价值单细胞测序技术是近年来生命科学领域最重要的突破性方法之一。与传统群体细胞测序不同&#xff0c;该技术能够在单个细胞分辨率上解析基因组、转录组及表观遗传组的异质性。这种精细化的分析能力&#xff0c;使得研究者得以揭示细胞发育过程中的动态…...

【DCTDECODE JPG】

import timeimport PyPDF2 import pdfplumber from PIL import Imagedef extract_image(page):try:# 提取第2页图片&#xff08;从0开始计数&#xff09;page_image pdf_image_reader.getPage(pageNumber1)extract_image(page_image)if /XObject in page[/Resources]:xObject …...

QMCFLAC2MP3:解锁音乐格式封印,让QQ音乐真正属于你

QMCFLAC2MP3&#xff1a;解锁音乐格式封印&#xff0c;让QQ音乐真正属于你 【免费下载链接】qmcflac2mp3 直接将qmcflac文件转换成mp3文件&#xff0c;突破QQ音乐的格式限制 项目地址: https://gitcode.com/gh_mirrors/qm/qmcflac2mp3 你是否曾经遇到过这样的尴尬场景&a…...

FPGA新手避坑:用Quartus Prime 23.1的FIFO IP核实现跨时钟域传输(附仿真代码)

FPGA跨时钟域传输实战&#xff1a;Quartus Prime 23.1 FIFO IP核深度解析 第一次在Quartus Prime里拖拽FIFO IP核时&#xff0c;看着满屏的参数选项&#xff0c;我对着屏幕发呆了十分钟——到底该选同步还是异步&#xff1f;深度设多少合适&#xff1f;为什么仿真时数据总对不上…...

保姆级教程:在CentOS 8 Stream上从零部署Zabbix 6.4监控系统(Nginx+MariaDB 10.6+PHP 7.4)

企业级监控系统实战&#xff1a;CentOS 8 Stream上部署Zabbix 6.4全栈指南 在数字化转型浪潮中&#xff0c;IT基础设施监控已成为企业运维的核心支柱。Zabbix作为开源监控领域的标杆产品&#xff0c;其6.4版本带来了更强大的自动发现机制和可视化功能。本文将手把手带您完成从裸…...

Vue2项目实战:v-md-editor从安装到二次封装全流程(附常见问题解决)

Vue2项目深度整合v-md-editor&#xff1a;从核心配置到企业级封装实践 在内容管理系统的开发中&#xff0c;Markdown编辑器已成为技术文档、博客平台和知识库系统的标配组件。v-md-editor作为Vue生态下功能完备的Markdown解决方案&#xff0c;其双栏实时预览、深度定制能力和丰…...

TDOA定位算法在工业4.0中的关键应用解析(2025年更新)

1. TDOA定位算法如何重塑工业4.0生产线 想象一下&#xff0c;在一个现代化的汽车工厂里&#xff0c;几十台焊接机器人正在流水线上精准作业&#xff0c;数百辆AGV小车穿梭运送零件&#xff0c;而它们之间始终保持5厘米的安全距离——这种零碰撞、高效率的协作背后&#xff0c;正…...

怕 AI 短剧平台抽成?自研 AI 短剧创作系统贴牌合作,全部收益自留

入局 AI 短剧&#xff0c;最头疼就是被平台高额抽成、规则限制、数据锁死。流量自己做、内容自己产&#xff0c;收益却要分走大半&#xff0c;随时还面临限流封号。选源头自研系统贴牌合作&#xff0c;彻底摆脱平台捆绑&#xff0c;所有收益全额自留&#xff0c;干货分点讲透&a…...

Janus-Pro-7B教育评估:学生作业图片批改+个性化反馈文字生成

Janus-Pro-7B教育评估&#xff1a;学生作业图片批改个性化反馈文字生成 1. 引言&#xff1a;当AI老师遇上学生作业 想象一下这个场景&#xff1a;一位老师面对堆积如山的作业本&#xff0c;需要逐一批改、写评语、分析错误&#xff0c;这往往需要耗费数小时甚至更长时间。现在…...