快捷導航

ElementUI中el-input無法輸入、修改及刪除問題解決辦法

更新時間：2023年11月15日 10:12:30 作者：用手寫的從前

這篇文章主要給大家介紹了關(guān)于ElementUI中el-input無法輸入、修改及刪除問題的解決辦法,這種問題產(chǎn)生是因為input在vue中的受控,我們需要去重新改變一下監(jiān)聽和實現(xiàn),需要的朋友可以參考下

elementUI是國內(nèi)前端工程師應(yīng)該都聽過或者使用過的前端框架，不只使用簡單，而且有著詳細的文檔和 API。使用 el-input 這個標簽時，我有些情況下在 el-input 是無法輸入的，綁定的值動也動不了，刪也刪不掉，改也改不了，所以我做了以下的解決方法的統(tǒng)計，希望可以幫助到大家！

如果大伙遇到了上面的問題，以下幾種方法大家都可以試試

1.常規(guī)的操作就是定義一個方法，在輸入框中，使用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來表示，如下：

造成的結(jié)果就是從后端傳來的數(shù)據(jù)只能顯示在輸入框中，不能改也不能刪，所以大家也可以考慮一下這個情況，當然表單的數(shù)據(jù)最好也不要使用this，雖然不知道原理，但是問題確實出在this上~

附：elementui el-input 只能輸入數(shù)字和-

你可以使用 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>

在這個示例中，我們監(jiān)聽了 el-input 的 @keypress 事件，并傳遞了一個事件對象作為參數(shù)。在 onKeypress 方法中，我們使用正則表達式 /[-0-9]/ 來匹配數(shù)字和 -，并使用 String.fromCharCode 方法獲取用戶按下的字符。如果用戶輸入的字符不符合正則表達式，則調(diào)用 event.preventDefault() 方法阻止默認行為，從而限制用戶輸入。

總結(jié)

到此這篇關(guān)于ElementUI中el-input無法輸入、修改及刪除問題解決辦法的文章就介紹到這了,更多相關(guān)el-input無法輸入修改刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: