自定义插槽使用show-overflow-tooltip
时间: 2023-10-27 15:06:44 浏览: 71
自定义插槽使用show-overflow-tooltip属性是为了实现在表格列中展示长文本时的缩略效果。根据引用和引用的内容,可以看出在自定义插槽中使用show-overflow-tooltip属性时,需要将要展示的文本放在一个span标签内,并通过使用v-html指令来动态渲染文本内容。同时,在自定义插槽的script标签中,需要定义一个show方法,该方法返回需要展示的文本。
在上述例子中,show方法的返回值为row.airCrftRegNbr + " 测试一下长文本展示效果",其中" "是表示空格占位符的HTML实体。通过这种方式,即使用空格占位符,也能正常展示缩略效果。
相关问题
show-overflow-tooltip失效
show-overflow-tooltip属性在el-table中失效的问题可以通过在作用域插槽中添加文字并将其隐藏来解决。具体的解决方案如下所示:
```html
<el-table-column :show-overflow-tooltip="true" align="center" prop="name" width="160px" label="名称">
<template slot-scope="scope">
<span style="display: block; overflow: hidden; height: 0;">{{scope.row.name}}</span>
<el-input placeholder="请输入" clearable v-model="scope.row.name"></el-input>
</template>
</el-table-column>
```
在这个解决方案中,我们在作用域插槽中添加了一个隐藏的span元素,并将其高度设置为0。这样,show-overflow-tooltip属性就可以正常工作,显示tooltip内容。
show-overflow-tooltip 允许换行
根据提供的代码,show-overflow-tooltip属性可以让el-tooltip组件在内容超出一行时自动换行显示。通过为el-tooltip的content插槽使用v-html指令转义文本,并使用ToBreak方法将换行符"\n"替换为HTML标签"<br />",可以实现在el-tooltip中显示换行内容。在样式方面,使用.oneLine类设置文本溢出时显示为省略号。所以,show-overflow-tooltip属性允许内容换行显示。