当前位置: 首页 > 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…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...