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官方

天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。