赞
踩
我一个前端技术小白,不会前端,没办法,只能使用别人做好的框架。
在最近项目使用Element,需求是要显示日志,日志表格中显示一串SQL。但是,在使用过程中,发现字符串过长,表格显示起来不美观,便用了“show-overflow-tooltip”,但是字符串过长,并没有自动换行。我就改用了弹出框, 对话框, 展开行等方式展示数据,字符串还是如此。如上图所示一样,理想上显示在细线范围的弹出框中,但现实却是字符串没有空格不能自动换行。
问题展示: 点击 “异常信息”下的“点击查看详细”按钮,弹出的“弹出框”中内容有超出。细线方框为理想状态,粗线方框为现实状态。
解决:在弹出框中加入了一个div,并设置div属性为强制换行。下面贴上代码。
下面为 html代码:在显示“弹出框”中,将要显示的内容包裹在 div 中
- <el-table-column :label="tableColLabel['exceptionMsg']" min-width="150">
- <template slot-scope="props">
- <el-popover placement="bottom"
- title="异常信息"
- width="600"
- trigger="click"
- content="">
- <div class="divcss555">
- {{ props.row.exceptionMsg }}
- </div>
- <el-button slot="reference">点击查看详细</el-button>
- </el-popover>
- </template>
- </el-table-column>
下面是js代码,设置 div 强制换行
- <style>
- .divcss555 {
- border: 1px solid #F00;
- width: 600px;
- height: 100px;
- word-break: break-all;
- }
- </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。