Vue el-table-column内el-tooltip识别换行符 \n

结构：

<el-table-column prop="callSummary" width="300" label="摘要">
    <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
               <div v-html="ToBreak(scope.row.text)" slot="content"></div>
               <div v-html="ToBreak(scope.row.text)"></div>
          </el-tooltip>
    </template>
</el-table-column>

方法：

ToBreak (val) {
            if (val == null || val == undefined) {
                return ""
            }
            
            if (val.includes('\n')) { //判断字符串中存在 \n
                let len = val.split('\n').length - 1  //判断字符串中存在几个 \n
                
                let str = ""
                for (let index = 0; index < len; index++) {  //循环替换 \n
                    str = val.replace(/\n/g, '<br />')
                }
                return str
            } else {
                return val;
            }
}

提示：

若是希望隐藏超出容器的文本，可以添加CSS样式

.omission {
  white-space: nowrap; /* 确保文本不换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}