elementui中el-input回車搜索實(shí)現(xiàn)示例

更新時(shí)間：2021年01月29日 11:33:19 作者：水冗水孚

這篇文章主要介紹了elementui中el-input回車搜索實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題描述

上一篇文章中講述了模糊查詢關(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中也自帶多選功能，見下圖，不過有些場(chǎng)景不太適用），用戶選擇了某一條以后，展示這一條數(shù)據(jù)展示給用戶看；但是有些情況就是用戶想直接看到所有關(guān)聯(lián)的數(shù)據(jù)都直接呈現(xiàn)在頁(yè)面上。比如用戶輸入了“王”這個(gè)字以后，要直接所有的與“王”字有關(guān)聯(lián)的數(shù)據(jù)都在頁(yè)面鋪開來供用戶選擇，這個(gè)時(shí)候，使用如下方法思路會(huì)更加適用一些：通過給el-input綁定enter回車事件，用戶在input框輸入內(nèi)容以后，直接敲下回車鍵，就發(fā)請(qǐng)求獲取后臺(tái)所有的關(guān)聯(lián)的數(shù)據(jù)，然后渲染呈現(xiàn)在頁(yè)面上，用戶想看誰(shuí)就點(diǎn)擊誰(shuí)。當(dāng)用戶把input框的內(nèi)容全部刪除完以后，當(dāng)input內(nèi)容為空的時(shí)候，在發(fā)請(qǐng)求回到初始的數(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ā)請(qǐng)求回到初始列表數(shù)據(jù)狀態(tài)
    console.log("搜索框沒東西了，回復(fù)初始狀態(tài)");
   }
  }
 },
 methods: {
  search(){
   // 控制一下，如果用戶沒輸入東西就不去搜索
   if(this.searchData == ""){
    return
   }else{
    // 把searchData帶著，發(fā)請(qǐng)求獲取有關(guān)聯(lián)的數(shù)據(jù)并呈現(xiàn)在頁(yè)面中
    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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: