elementUI中table列表中的tooltip内容换行

具体思路：
使用slot自定义el-tooltip内容
v-html指令转义
删除 show-overflow-tooltip属性或设置为false，否则页面出现两个近乎重叠的tip

后端返回数据，使用正则表达式进行处理

<el-table-column
                         label="重点事项"
                         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
      }
    },