elementui中el-input回車搜索實(shí)現(xiàn)示例
問題描述
上一篇文章中講述了模糊查詢關(guān)聯(lián)搜索,不過模糊查詢關(guān)聯(lián)搜索一般來說都是用戶輸入某個(gè)關(guān)鍵字以后,關(guān)聯(lián)相關(guān)的數(shù)據(jù)呈現(xiàn),并供用戶選擇一條(當(dāng)然el-select中也自帶多選功能,見下圖,不過有些場景不太適用),用戶選擇了某一條以后,展示這一條數(shù)據(jù)展示給用戶看;但是有些情況就是用戶想直接看到所有關(guān)聯(lián)的數(shù)據(jù)都直接呈現(xiàn)在頁面上。比如用戶輸入了“王”這個(gè)字以后,要直接所有的與“王”字有關(guān)聯(lián)的數(shù)據(jù)都在頁面鋪開來供用戶選擇,這個(gè)時(shí)候,使用如下方法思路會更加適用一些:通過給el-input綁定enter回車事件,用戶在input框輸入內(nèi)容以后,直接敲下回車鍵,就發(fā)請求獲取后臺所有的關(guān)聯(lián)的數(shù)據(jù),然后渲染呈現(xiàn)在頁面上,用戶想看誰就點(diǎn)擊誰。當(dāng)用戶把input框的內(nèi)容全部刪除完以后,當(dāng)input內(nèi)容為空的時(shí)候,在發(fā)請求回到初始的數(shù)據(jù)狀態(tài)。
el-select多選功能效果圖
el-input綁定回車代碼
html部分
<template> <div id="app"> <!-- 使用vue自帶的綁定回車事件 使用trim修飾,不讓用戶亂輸入空格 --> <el-input v-model.trim="searchData" @keyup.enter.native="search" ></el-input> </div> </template>
js部分
<script> export default { name: "app", data() { return { searchData: "", }; }, watch:{ // 監(jiān)聽input輸入框,若沒東西了,就回復(fù)默認(rèn)狀態(tài) searchData:function(newnew,oldold){ if(newnew == ""){ // 發(fā)請求回到初始列表數(shù)據(jù)狀態(tài) console.log("搜索框沒東西了,回復(fù)初始狀態(tài)"); } } }, methods: { search(){ // 控制一下,如果用戶沒輸入東西就不去搜索 if(this.searchData == ""){ return }else{ // 把searchData帶著,發(fā)請求獲取有關(guān)聯(lián)的數(shù)據(jù)并呈現(xiàn)在頁面中 console.log("帶著關(guān)鍵字交給后端搜索",this.searchData); } } }, }; </script>
總結(jié)
其實(shí)寫代碼最重要的就是思路,只要有思路了,就相當(dāng)于有方向了,基本上都可以解決問題的。上述代碼主要說的是思路,實(shí)現(xiàn)需求靈活變通一下即可。
到此這篇關(guān)于elementui中el-input回車搜索實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element el-input回車搜索內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue項(xiàng)目History模式404問題解決方法
本文主要解決Vue項(xiàng)目使用History模式發(fā)布到服務(wù)器Nginx上刷新頁面404問題。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10Vue實(shí)現(xiàn)拖放排序功能的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了Vue中實(shí)現(xiàn)拖放排序功能,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07Vue利用廣度優(yōu)先搜索實(shí)現(xiàn)watch
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用廣度優(yōu)先搜索實(shí)現(xiàn)watch(有意思),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖
因?yàn)楣ぷ髦幸玫礁侍貓D,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關(guān)于vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖的相關(guān)資料,需要的朋友可以參考下2022-11-11vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作
這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09