当前位置: 首页 > 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官方

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

http://www.lryc.cn/news/105820.html

相关文章:

  • JAVA基础-多线程入门(详解)
  • Cirno‘s Perfect Equation Class 2023牛客暑期多校训练营5 D
  • pytorch学习——如何构建一个神经网络——以手写数字识别为例
  • PySpark 数据操作
  • FPGA2-采集OV5640乒乓缓存后经USB3.0发送到上位机显示
  • 亚信科技AntDB数据库专家参加向量数据库首次技术标准研讨会
  • Windows中实现右键把电子书通过邮件发到kindle
  • Three.js之创建3D场景
  • 一个3年Android的找工作记录
  • CAS原理解析
  • SQL项目实战:银行客户分析
  • 【Redis深度专题】「核心技术提升」探究Redis服务启动的过程机制的技术原理和流程分析的指南(集群指令分析—实战篇)
  • ubuntu
  • 【芯片设计- RTL 数字逻辑设计入门 3- Verdi 常用使用命令】
  • python-pytorch基础之cifar10数据集使用图片分类
  • 华纳云:linux下磁盘管理与挂载硬盘方法是什么
  • ChatGPT + Stable Diffusion + 百度AI + MoviePy 实现文字生成视频,小说转视频,自媒体神器!(一)
  • linux strcpy/strncpy/sprintf内存溢出问题
  • Jmeter如何添加插件
  • flask---CBV使用和源码分析
  • Qt 实现压缩文件、文件夹和解压缩操作zip
  • 简单工厂模式VS策略模式
  • 【MySQL】触发器 (十二)
  • 听说 Spring Bean 的创建还有一条捷径?
  • 大数据课程E6——Flume的Processor
  • 实现邮箱管理之gmail邮箱、office365(Azure)邮箱之披荆斩棘问题一览
  • (AcWing)多重背包问题 I,II
  • 如何把几个视频合并在一起?视频合并方法分享
  • 【MyBatis】初学MyBatis
  • 深度学习训练营之DCGAN网络学习