table表格换行php技巧_elementUI中table列表中的tooltip内容换行

详细思路：利用slot自定义el-tooltip内容v-html指令转义删除 show-overflow-tooltip属性或设置为false，否则页面涌现两个近乎重叠的tip后端返回数据，利用正则表达式进行处理

<el-table-columnlabel="重点事变"prop="keyMatter":show-overflow-tooltip="false"class="el-tooltip__popper"align="left" header-align="center"style="max-height: 40px"><template slot-scope="scope"><el-tooltip class="item" effect="dark" placement="top"><div v-html="(scope.row.keyMatter).replace(/\n/g, '<br />')" slot="content"></div><div class="oneLine">{{scope.row.keyMatter}}</div></el-tooltip></template></el-table-column>

实际代码转换紧张用到正则表达式匹配实现所须要的效果。

以下是封装的方法，直接传值利用即可（相称于上述的优化版）

ruleDate(data){console.log('格式化数据', data);if(data){let newData = data.replace(/(\r\n)|(\n)|(\r)/g, '<br />');return newData}else{return null}}