国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<tfoot id="mukyo"><wbr id="mukyo"></wbr></tfoot>

<table id="mukyo"><pre id="mukyo"></pre></table>

Element-UI中el-form內(nèi)部在輸入框回車(chē)導(dǎo)致刷新頁(yè)面的問(wèn)題解決。

2年前作者：TangBoBoa分類：Toy博客閱讀(24)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了Element-UI中el-form內(nèi)部在輸入框回車(chē)導(dǎo)致刷新頁(yè)面的問(wèn)題解決。。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

問(wèn)題描述：

當(dāng)el-form表單里面只有一個(gè)el-input輸入框的時(shí)候，在輸入框選中時(shí)按回車(chē)會(huì)刷新頁(yè)面：

<el-form :model="roleQueryParams" ref="roleQueryForm" size="small"
 :inline="true" label-width="68px">
    <el-form-item label="角色名稱" prop="roleName">
        <el-input
            v-model="roleQueryParams.roleName"
            placeholder="請(qǐng)輸入角色名稱"
            clearable
            style="width: 250px"
            @keyup.enter.native="roleHandleQuery"
         />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="roleHandleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="roleResetQuery">重置</el-button>
     </el-form-item>
</el-form>

問(wèn)題分析：

默認(rèn)情況下，el-form中只有一個(gè)輸入框時(shí)，el-form會(huì)自動(dòng)為輸入框添加一個(gè)type="submit"的按鈕，當(dāng)按下回車(chē)鍵時(shí)，該按鈕會(huì)觸發(fā)表單的提交事件。

解決方法：

在el-form標(biāo)簽內(nèi)加入@submit.native.prevent即可解決，代碼示例：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-513495.html

<el-form :model="roleQueryParams" ref="roleQueryForm" size="small"
 :inline="true" label-width="68px" @submit.native.prevent>
    <el-form-item label="角色名稱" prop="roleName">
        <el-input
            v-model="roleQueryParams.roleName"
            placeholder="請(qǐng)輸入角色名稱"
            clearable
            style="width: 250px"
            @keyup.enter.native="roleHandleQuery"
         />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="roleHandleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="roleResetQuery">重置</el-button>
     </el-form-item>
</el-form>

到了這里，關(guān)于Element-UI中el-form內(nèi)部在輸入框回車(chē)導(dǎo)致刷新頁(yè)面的問(wèn)題解決。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

在vue項(xiàng)目里，Element-Ui中el-form 實(shí)現(xiàn)一行兩個(gè)表單效果
1.首先使用elementUi中的Layout 24分欄進(jìn)行布局，將整個(gè)form表單放入24分欄里如圖所示： 2.再將需要同行顯示的表單放入el-row中的el-col中去 3.然后再根據(jù)你的需求控制一下表單大小就ok啦? 全部代碼：效果圖如下： ?
2024年02月11日
瀏覽(32)
element-ui的el-form表單和el-table校驗(yàn)嵌套使用校驗(yàn)el-input和el-select
場(chǎng)景:前端開(kāi)發(fā)中,經(jīng)常會(huì)遇到比較多的表單填寫(xiě)頁(yè)面,其中有el-form,el-table,表格的每一列中又嵌套著輸入框或者下拉框,然后每個(gè)還需要做單獨(dú)的校驗(yàn) 效果: ? 點(diǎn)擊保存可校驗(yàn)el-input和el-select是否有值，不符合校驗(yàn)規(guī)則就標(biāo)紅提醒 ? 1.el-form里面嵌套el-table 2.在el-table-column自定義內(nèi)
2024年02月02日
瀏覽(32)
vue element-ui el-input輸入框綁定@keyup.enter回車(chē)事件無(wú)效
由于element-ui把input進(jìn)行了封裝，input外面是多一層div的。在element-ui里有很多因?yàn)樽陨矸庋b了幾層標(biāo)簽導(dǎo)致事件和樣式無(wú)法按想要的效果呈現(xiàn)，遇到后可以在網(wǎng)頁(yè)中查看dom結(jié)構(gòu)分析原因。所以對(duì)于el-input，使用 @keyup.enter是無(wú)效的，需要加上 .native 限制符 .native修飾符的作用：
2024年02月16日
瀏覽(38)
el-form 動(dòng)態(tài)表單增減項(xiàng) （vue+element ui）
1、點(diǎn)擊”+“，彈出彈窗，新增一項(xiàng)，點(diǎn)擊”-“，刪除當(dāng)前項(xiàng) 代碼展示： html代碼：注意： el-form-item（表單項(xiàng)）循環(huán)，綁定的數(shù)組寫(xiě)在form當(dāng)中表單：新增參數(shù)彈框： data: methods： 1、點(diǎn)擊新增，彈出新增彈窗，添加表單項(xiàng) 2、點(diǎn)擊”-“，刪除當(dāng)前表單項(xiàng)
2024年02月02日
瀏覽(27)
Element ui el-form嵌套el-table并設(shè)置校驗(yàn)
動(dòng)態(tài)增減表單項(xiàng) 因?yàn)榍短钻P(guān)系，el-table的數(shù)據(jù)綁定的是：data=“form.tableData” 因?yàn)楸砀裰械谋韱雾?xiàng)校驗(yàn)需要綁定prop字段，這個(gè)字段根據(jù)表格索引動(dòng)態(tài)綁定所以添加校驗(yàn)時(shí)需要注意表單的prop屬性是動(dòng)態(tài)的，例如 :prop=“‘tableData.’ + scope.$index + ‘.name’” ，另外prop中的最后一個(gè)
2024年01月22日
瀏覽(34)
【已解決】element-ui組件嵌套太多層，導(dǎo)致內(nèi)部el-input和el-select 等組件無(wú)法正常輸入解決方案
如果 element-ui 組件嵌套太多層，可能會(huì)導(dǎo)致內(nèi)部的 el-input 和 el-select 等組件無(wú)法正常輸入。出現(xiàn)這種問(wèn)題通常是由于 z-index 屬性設(shè)置不正確導(dǎo)致的。解決這個(gè)問(wèn)題的方法是調(diào)整組件的 z-index 屬性，使其不會(huì)被其他組件覆蓋。以下是一個(gè)解決方法：在上面的代碼中，我們首先
2023年04月13日
瀏覽(69)
【Element Ui】 vue3中修改el-form的rules后不觸發(fā)自動(dòng)校驗(yàn),再次修改rules時(shí)清除驗(yàn)證信息
項(xiàng)目要求：類型為“業(yè)務(wù)備貨”的時(shí)候，“客戶”為必填項(xiàng) 效果如下：代碼如下：重點(diǎn)：
2024年04月12日
瀏覽(24)
[vue+element-ui] form中輸入框無(wú)法輸入問(wèn)題的解決方法
目錄一.問(wèn)題發(fā)現(xiàn)：二.正確案例與錯(cuò)誤原理：三.問(wèn)題解決筆者在制作登錄頁(yè)面前端時(shí)使用elementui+vue技術(shù)，發(fā)現(xiàn)輸入框無(wú)法輸入任何內(nèi)容。在csdn上查閱很多文章后發(fā)現(xiàn)都無(wú)法解決，于是去elementui官網(wǎng)進(jìn)行反復(fù)查看才發(fā)現(xiàn)問(wèn)題所在。最終發(fā)現(xiàn)問(wèn)題是input標(biāo)簽中v-model寫(xiě)的不恰
2024年02月02日
瀏覽(18)
vue3使用el-form實(shí)現(xiàn)登錄、注冊(cè)功能，且進(jìn)行表單驗(yàn)證（Element Plus中的el-form）
簡(jiǎn)介：Element Plus 中的 el-form 是一個(gè)表單組件，用于快速構(gòu)建表單并進(jìn)行數(shù)據(jù)校驗(yàn)。它提供了豐富的表單元素和驗(yàn)證規(guī)則，使表單開(kāi)發(fā)變得更加簡(jiǎn)單和高效?？梢源钆鋏l-dialog實(shí)現(xiàn)當(dāng)前頁(yè)面的登錄、注冊(cè)頁(yè) ，這兩天在vue3中用到了表單登錄，特意記錄一下，這里沒(méi)有封裝，直接使
2024年02月07日
瀏覽(130)
element-ui el-date-picker禁止手動(dòng)輸入
element-ui的DateTimePicker組件為我們提供了文本框可輸入屬性 editable=“false/true”，但是此屬性只對(duì)外框有作用，內(nèi)框還是能手動(dòng)輸入但是需求需要我們外框內(nèi)框都不允許輸入只能選擇，就需要我們自己寫(xiě)js代碼處理，把組件里面的輸入框變?yōu)榭勺x，添加readonly屬性解決如下：
2024年02月16日
瀏覽(23)

<kbd id="ucqwo"></kbd>

<rt id="ucqwo"></rt><td id="ucqwo"><th id="ucqwo"></th></td>

<center id="ucqwo"><pre id="ucqwo"></pre></center>

<rt id="ucqwo"><cite id="ucqwo"></cite></rt>

<samp id="ucqwo"><wbr id="ucqwo"></wbr></samp>