项目场景:
提示:这里简述项目相关背景:
需求是直接在表格上修改内容,所以在表格中使用了插槽,将输入框插入表格中。当内容过长时,用户想鼠标移入出现气泡完整查看内容。
问题描述
提示:这里描述项目中遇到的问题:
当表格中输入框的内容过长时,鼠标移入无法看到完整内容,气泡失效。
<el-table-column
:show-overflow-tooltip="true"
align="center"
prop="name"
width="160px"
label="名称">
<template slot-scope="scope">
<el-input placeholder="请输入" clearable v-model="scope.row.name"></el-input>
</template>
</el-table-column>
原因分析:
el-table中使用show-overflow-tooltip属性内容过长被隐藏时显示 tooltip,使用了作用域插槽的模板,那么show-overflow-tooltip设置的显示tooltip内容只作用到下一级的div内容。这样就无法作用到文字上。
解决方案:
在插槽中加入文字,并将其隐藏,气泡功能就恢复正常了。
<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>