输入文字时我们会遇到想要回车的时候但是发现存进库中的数据不能够进行分行和空格,所以我用正则将保存之前进行转换,

然后在编辑的时候,去掉空格

在去掉 的时候我参考了这个链接,写的非常的不错

https://blog.csdn.net/XPY567/article/details/49756421

 这个是两个方法

// 添加保留换行符
  Vue.prototype.addHhf = (str) => {
    return str.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')
  }
  // 还原换行符
  Vue.prototype.replaceHhf = (str) => {
    return str.replace(/<br\/>/g, '\n').replace(/<br\/>/g, '\n').replace(/\s/g, '\n').replace(/[ ]|[&nbsp;]/g, '')
  }

在保存之前调用

 this.tzggform.GGMS = this.tzggform.GGMS
            ? this.replaceHhf(this.tzggform.GGMS)
            : null;

那么在详情查看的时候用v-html标签

<div v-html="form.GGMS" class="ggms"></div>

 展示出来就是酱紫的

要是编辑这条数据的时候在获取想详情的时候

this.tzggform.GGMS = this.tzggform.GGMS
            ? this.replaceHhf(this.tzggform.GGMS)
            : null;
<el-input
              type="textarea"
              v-model="tzggform.GGMS"
              :autosize="{ minRows: 2, maxRows: 8}"
              style="width:75%;margin-top:5px;display: inline-block;float: left;"
            ></el-input>

Logo

前往低代码交流专区

更多推荐