快捷導(dǎo)航

ElementUI中el-input無(wú)法輸入、修改及刪除問(wèn)題解決辦法

更新時(shí)間：2023年11月15日 10:12:30 作者：用手寫(xiě)的從前

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

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

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

1.常規(guī)的操作就是定義一個(gè)方法，在輸入框中，使用forceUpdate強(qiáng)制刷新

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

change(){
	this.$forceUpdate();  //強(qiáng)制刷新
}

2.可能是input的父標(biāo)簽是 template

這個(gè)時(shí)候我們需要在template標(biāo)簽中添加slot-scope 屬性

<template slot-scope="scope">

3.我們有些時(shí)候可能會(huì)忘記加入v-model屬性，來(lái)綁定輸入框中的值，如果忘記加入了，記得補(bǔ)上。

4.除此之外，我個(gè)人遇到的問(wèn)題就是在加入v-model時(shí)，將值使用了this來(lái)表示，如下：

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

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

你可以使用 el-input 組件的 onkeypress 事件和 JavaScript 的正則表達(dá)式來(lái)限制用戶輸入。以下是一個(gè)示例：

<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>

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

總結(jié)

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

您可能感興趣的文章: