vue中使用textarea回显不换行

<template><div><el-row v-show="!isedit"><el-col :span="18"><h3 class="resumecaption">个人优势</h3><span v-html="ruleForm.personalStrength" class="resumecontent"></span></el-col><el-col :span="6" class="rightcol"><el-button icon="el-icon-edit" type="text" @click="handleEdit">编辑</el-button></el-col></el-row><el-row v-show="isedit" class="editing"><el-col><h2>编辑个人优势</h2></el-col><el-col><el-inputtype="textarea"placeholder="请输入内容"v-model="ruleForm.personalStrength"maxlength="140":autosize="{ minRows: 5}"show-word-limit></el-input></el-col><el-col class="submitbtn"><el-button @click="handlerCancel">取消</el-button><el-button type="primary" @click="submitForm()">完成</el-button></el-col></el-row><cancelDialog ref="canceldialog" @closeDialog="isedit = false"></cancelDialog></div>
</template><script>import cancelDialog from "./cancelDialog.vue"export default {data() {return {isedit: false,ruleForm: {personalStrength:'',}};},components:{cancelDialog},mounted() {this.queryZxApplyResumeByCcodePerson();},methods:{handleEdit(){this.ruleForm.personalStrength = this.ruleForm.personalStrength.replace(/<br\/>/g, "\n");this.isedit = true},submitForm() {let params = Object.assign({}, this.ruleForm);this.$busapi.zxApplyResume.saveZxApplyResume(this.qyframe.formRequest(params)).then((res) => {if (res.code == "0000") {this.isedit = false} else {this.$message({message: '创建失败，原因：' + res.msg, type: 'error'})}}).catch((res) => {this.$message({message: res.msg, type: 'error'});});},handlerCancel(){this.$refs.canceldialog.dialogVisible=true},queryZxApplyResumeByCcodePerson(){//查询简历this.$busapi.zxApplyResume.queryZxApplyResumeByCcodePerson().then((res) => {if (res.code == "0000") {let remarkStr if(res.data.personalStrength!=''){remarkStr = res.data.personalStrength.replace(/\\n/g, '<br/>')}this.ruleForm.personalStrength =  remarkStr} else {this.$message({message: '错误原因：' + res.msg, type: 'error'})}}).catch((res) => {this.$message({message: res.msg, type: 'error'});});}}};
</script><style rel="stylesheet/scss" lang="scss" scoped="scoped">@import "~@/assets/scss/resume.scss";
</style>

回显的时候把/n转换成<br/>

vue中使用textarea回显不换行相关推荐

js textarea换行分隔成数组和数组转换行符textarea回显
在web的前端操作中,有时候需要将 html 的 textarea 标签元素中的内容以每行的形式转成一个数组并发向后台,在编辑的时候,数组数据需要taxtarea换行显示.那么该如何做呢? 下面这篇博 ...
c语言中回显,C语言编程中实现输入密码回显星号
C语言编程中实现输入密码回显星号众所周知,一个良好的密码输入程序是在用户输入密码时不显示密码本身,只回显星号. 或者,在安全性要求更高的某些程序中,什么都不显示.那么,在C语言中如何实现它呢? ge ...
vue上传图片，并回显图片
vue上传图片,并回显图片未用组件库,原生的input输入框提交这个看需求吧,用组件库的话,可以减少挺多代码的,但是这个的后端,因为只能单独提交照片,所以我就使用js了.逻辑绕绕的. <in ...
DataTables中设置checkbox回显选中
场景在进行编辑时DataTables中第一列的checkbox回显默认选中. 效果实现 dataTables赋值代码 columns: [{ data: 'id' ,"orderable ...
C语言编程中实现输入密码回显星号
众所周知,一个良好的密码输入程序是在用户输入密码时不显示密码本身,只回显星号.或者,在安全性要求更高的某些程序中,什么都不显示.那么,在C语言中如何实现它呢? getc()和getchar()函数想必 ...
vue+springboot-前台怎么回显本地文件夹下的图片
如果你想在前端回显本地文件夹下的图片,那么你就要在上传图片的时候将图片上传的路径设置成后台项目文件夹的路径,在浏览器输入地址即可访问.上传到服务器的我就先不举例了. 图片上传的位置: 后台端口:818 ...
ElementUI中的el-select中多选回显数据后没法重新选择和更改
场景 ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detai ...
Windows脚本（批处理文件）中pause不回显
问题: Windows脚本(批处理文件)在某些情况下可以发挥较大的作用,提高处理的效率和自动化程度,例如:在Windows平台上,一些软件的安装,文件处理小工具等等.如何让脚本看起来更具专业化,则需要 ...
vue学习之textarea输入英文时换行
需求:在使用textarea标签时,我们需要将英文单词进行截断处理,使其换行,如何实现? 解决方法:给textarea增加 word-break:break-all 属性即可,这个属性会对处于末尾的单 ...

vue中使用textarea回显不换行

vue中使用textarea回显不换行相关推荐

最新文章

热门文章