位置: IT常识 - 正文
Vue：element-ui中表格过长内容隐藏显示
编辑：rootadmin推荐整理分享Vue：element-ui中表格过长内容隐藏显示，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
在使用VUE显示后台数据时，经常会遇到数据过长，显示出来的效果很难看，如下图所示：
上图中，红框框出的内容由于长度过长，占据了三行空间，如果内容更多的话，占据行数就更多了，表格中列数一多的话，显出出来的效果会很难看。
为了解决上述问题，我们可以利用<el-table-column>组件提供的一个属性：:show-overflow-tooltip='true' 添加该属性，会将过长的部分内容隐藏起来，并且在鼠标悬停在内容上面时，会以悬浮框的形式将所有数据显示出来，代码如下所示：
<el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column>
效果如下图所示：
从上图效果中，可以看出，框出的内容在显示时将其过长的部分以省略号...代替，而当鼠标放置到内容上面时，包括隐藏数据的所有数据以悬浮框的形式显示出来。
这种方法即达到了使页面美观，也达到了数据显示的的目的，可以在前端使用表格显示数据的时候采用。
但是，这种方法有一个很大的弊端，即鼠标悬停显示的数据无法复制。为了解决这个问题，可以在表格中采用Popover 弹出框组件。
二、Popover 弹出框element-ui中，表格使用Popover 弹出框组件代码如下：
<!-- <el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column> --><el-table-column label="deviceId" prop="deviceId"><template slot-scope='scope'><el-popoverplacement="top-start"width="400"trigger="hover"><span>{{scope.row.deviceId}}</span><span slot="reference">{{scope.row.deviceId.substr(1,20) + '...'}}</span></el-popover></template></el-table-column>最终效果如下所示：
从上图可以看出，使用Popover 弹出框组件，我们不仅在鼠标指向内容时，在悬浮框中将所有内容显示出来，鼠标还可以一如到悬浮框，复制自己想要的内容。
上一篇：南邦国家公园的尖峰石阵，西澳大利亚州 (© Frank Krahmer/Getty Images Plus)(鬓角头发剃光了多久能长好)
下一篇：Vue项目二 登录注册功能的实现(vue 登录模板)
