关于 泛微流程表单中 ‘文本域(textarea)‘类型在,在其他ui框架文本框页面显示的问题

133 阅读1分钟

utils/comm.js

/**  
 * getRepHtml、getRepSymbol 解决oa文本框传过来的数据显示问题  
 * @param {*} val   
 * @returns   
 */  
// 转换为html标签  
export function getRepHtml(val) {  
  return (  
    "<p>" + val.replace(/ /g, "&nbsp;").replace(/\n|\r\n/g, "<p/><p>") + "</p>"  
  );  
}  
// 换行符、空格符替换html标签  
export function getRepSymbol(val) {  
  return val.replace(/&nbsp;/g, " ").replace("<br>", "\n");  
}

后端在OA里取的值(info):

let info = "时间安排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主讲地址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主讲人<br>14:00-16:30nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;福田区会展中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;王小川"

this.textareaInfo = getRepSymbol(info)

element-ui:中input的文本域

<el-input type="textarea" autosize placeholder="请输入内容" v-model="textareaInfo"> </el-input>

页面显示解决:显示html标签问题

<div v-html="getRepHtml(textareaInfo)"></div>