1.写vue遇到的小问题及解决方法。如：点击按钮后，按钮颜色不立刻回显；数据列表某字段过长，要求鼠标悬停显示

最新推荐文章于 2023-10-09 10:45:05 发布

小兽~

最新推荐文章于 2023-10-09 10:45:05 发布

阅读量706

点赞数 1

文章标签： vue elementui javascript

本文链接：https://blog.csdn.net/qq_52999833/article/details/114081067

版权

问题1

el-button 按钮点击后，按钮的颜色不回显，点击别处颜色才变回

在这里插入图片描述

（1）给按钮定义一个id:

// 查询按钮
<el-button id="queryButton" type="primary" size="mini" @click="query">查询</el-button>

（2）在按钮点击调用的query方法中写下面这句：

// 查询按钮调用的方法
query(){
	//引号里面为按钮中定义的id,让按钮失焦
	document.getElementById("queryButton").blur();
}

数据列表中某条数据太长，但是列表的宽度有限，数据自动折成很多行。要求：展示成一行
在这里插入图片描述

修改过的效果如下，该字段的部分文字展示成一行，鼠标悬停在文字上，展示全部文字
在这里插入图片描述
（1）在el-table-column表中中，设置show-overflow-tooltip为true

<el-table-column prop="name" width="180" :show-overflow-tooltip="true"/>

（2）下方代码设置悬浮框的宽度（若数据过长，不设置宽度，会超出页面宽度，导致文字展示不完整。若数据长度确认不超过页面宽度，可不设下方的样式。注意：该样式不可设在scope中）

<style style="sass">
/*设置悬浮框最大宽度为600px*/
.el-tooltip__popper{
	max-width : 600px;
}
</style>

关注