VUE ElementUI中table框设置文字超出隐藏及设置提示框样式
当表格中某单元格的文字内容过多时,table中的每行的行高不一致导致风格不统一,这时需要用到ElementUI中table自带的属性show-overflow-tooltip使其内容均在一行显示,超出部分隐藏,鼠标移上去显示提示框,效果如下:<el-table-columnprop="description"label="模板说明"width="400":show-overflow-tool
·
当表格中某单元格的文字内容过多时,table中的每行的行高不一致导致风格不统一,这时需要用到ElementUI中table自带的属性show-overflow-tooltip使其内容均在一行显示,超出部分隐藏,鼠标移上去显示提示框,效果如下:
<el-table-column
prop="description"
label="模板说明"
width="400"
:show-overflow-tooltip="true"
/>
再对其提示框在全局中(若多个页面中有表格不用重复设置)设置最大宽度,以防文字内容过多会超屏显示
方法:在src>assets>css中建一个tooltip.css文件即可,文件内容如下:
/* 全局样式表 */
/* elementui中table超出隐藏提示框宽度 */
.el-tooltip__popper {
max-width: 800px;
}
更多推荐
已为社区贡献5条内容
所有评论(0)