Vue+Element ui Study

目录

[一、Vue+Element ui](#一、Vue+Element ui)

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

[2、this.refs使用方法](#2、this.refs使用方法)

[Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'xxx')"](#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官方

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

相关推荐
Katzelala29 分钟前
[K8S学习笔记] Service和Ingress的关系
笔记·学习·kubernetes
有谁看见我的剑了?35 分钟前
k8s-init容器学习
学习·容器·kubernetes
HAH-HAH2 小时前
【Python 入门】(2)Python 语言基础(变量)
开发语言·python·学习·青少年编程·个人开发·变量·python 语法
xian_wwq3 小时前
【学习笔记】Https证书如何升级到国密
笔记·学习·证书
Aotman_5 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
百思可瑞教育6 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
The_Killer.6 小时前
格密码--从FFT到NTT(附源码)
学习·线性代数·密码学·格密码
四谎真好看7 小时前
Java 黑马程序员学习笔记(进阶篇6)
java·笔记·学习·学习笔记
qq_12498707537 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
Alice-YUE7 小时前
【css学习笔记8】html5css3新特性
css·笔记·学习