ElementUI中el-input无法输入、修改及删除问题解决办法

elementUI是国内前端工程师应该都听过或者使用过的前端框架， 不只使用简单，而且有着详细的文档和 API。使用 el-input 这个标签时，我有些情况下在 el-input 是无法输入的，绑定的值动也动不了，删也删不掉，改也改不了，所以我做了以下的解决方法的统计，希望可以帮助到大家！

如果大伙遇到了上面的问题，以下几种方法大家都可以试试

1.常规的操作就是定义一个方法，在输入框中，使用forceUpdate强制刷新 

<el-input type='text' v-model='value' @change='change()'></el-input>
 

change(){
	this.$forceUpdate();  //强制刷新
}

2.可能是input的父标签是 template

这个时候我们需要在template标签中添加slot-scope 属性

<template slot-scope="scope">

3.我们有些时候可能会忘记加入v-model属性，来绑定输入框中的值，如果忘记加入了，记得补上。

4.除此之外，我个人遇到的问题就是在加入v-model时，将值使用了this来表示，如下：

造成的结果就是从后端传来的数据只能显示在输入框中，不能改也不能删，所以大家也可以考虑一下这个情况，当然表单的数据最好也不要使用this，虽然不知道原理，但是问题确实出在this上~

附：elementui el-input 只能输入数字和-

你可以使用 el-input 组件的 onkeypress 事件和 JavaScript 的正则表达式来限制用户输入。以下是一个示例：

<template>
  <el-input v-model="inputValue" @keypress="onKeypress"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    onKeypress(event) {
      const regex = /[-0-9]/;
      const char = String.fromCharCode(event.keyCode);
      if (!regex.test(char)) {
        event.preventDefault();
      }
    },
  },
};
</script>

在这个示例中，我们监听了 el-input 的 @keypress 事件，并传递了一个事件对象作为参数。在 onKeypress 方法中，我们使用正则表达式 /[-0-9]/ 来匹配数字和 -，并使用 String.fromCharCode 方法获取用户按下的字符。如果用户输入的字符不符合正则表达式，则调用 event.preventDefault() 方法阻止默认行为，从而限制用户输入。

总结

到此这篇关于ElementUI中el-input无法输入、修改及删除问题解决办法的文章就介绍到这了,更多相关el-input无法输入修改删除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！