vue +element ui input框 type=”textarea“时,输入值,enter键触发,会自动添加空格问题(使用trim去掉首尾空格)

导读:本篇文章讲解 vue +element ui input框 type=”textarea“时,输入值,enter键触发,会自动添加空格问题(使用trim去掉首尾空格),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

出现场景:

管理后台项目,查询条件一直使用的是input 默认类型的框,今天要加一个 文本域类型的框
当值输入完时,enter键触发,发现 查出来是空数据但是表格里是有该条数据的

表格数据

在这里插入图片描述
输入料号为:117S00052 进行查询,结果发现是空数据,输入框里也没有输入空格讷,但是发现传参时,地址后面多了一个空格字符,导致查出来的数据是空的
在这里插入图片描述
既然找到了问题,就好解决了 。

解决办法:在v-model加上.trim 就可以解决了

在这里插入图片描述

错误代码:

 <el-form-item>
            <el-input
              type="textarea"
              v-model="query.pn"
              clearable
              size="small"
              :placeholder="$t('sluggishMaterials.partNumber')"
              style="width: 200px"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>

修改后代码:
在这里插入图片描述

   <el-form-item>
            <el-input
              type="textarea"
              v-model.trim="query.pn"
              clearable
              size="small"
              :placeholder="$t('sluggishMaterials.partNumber')"
              style="width: 200px"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>

tips:


v-model.lazy 只有在input输入框发生blur事件时才触发

v-model.trim 去除首尾空格

v-model.number 输入的字符串转换成number

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/79182.html

(1)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!