vue2.0 element-ui中input的@keyup.native.enter='onQuery'回車查詢刷新整個表單的解決辦法


項目中用的element-ui是v1.4.3版本
實現的功能是在input中輸入查詢的名稱,按下鍵盤回車鍵,可以查詢表格中數據

問題是,我輸入名稱,按下回車,會整個表單刷新,搜索條件也被清空;代碼如下:

 <sc-form-layout class="sc-box-content sc-box-conten-search">
        <sc-form-layout-row>
            <sc-form-layout-col>
                <el-form :model="queryConditions" >
                    <sc-form-layout>
                        <sc-form-layout-row>
                            <sc-form-layout-col></sc-form-layout-col>
                            <sc-form-layout-col width="standard">
                                <el-form-item label="">
                                    <el-input v-model="queryConditions.fileName" auto-complete="off"
                                              icon="search" placeholder="請輸入報告名稱/文件名稱"
                                              :on-icon-click='onQuery' @keyup.native.enter='onQuery'
                                    ></el-input>
                                </el-form-item>
                            </sc-form-layout-col>
                            <sc-form-layout-col align="right" style="width:6%;min-width: 180px;">
                                <el-button type="primary" @click="onQuery" v-cloak>{{actions.query.text}}</el-button>
                                <el-button @click="onReset" v-cloak>{{actions.reset.text}}</el-button>
                            </sc-form-layout-col>
                        </sc-form-layout-row>
                    </sc-form-layout>
                </el-form>
            </sc-form-layout-col>
        </sc-form-layout-row>
    </sc-form-layout>

查詢方法沒什么問題,后來查到是當我按下回車的時候,觸發了表單的submit事件,然后整個表單就會被刷新,解決方法:
中加上 onSubmit="return false" 變成 這樣就可以了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM