element中el-autocomplete的常見用法示例
前言:
這段時間突然發(fā)現(xiàn)很少寫博客了,平時都在平衡工作和休息的時間,周末也沒動過筆,而且更重要的是我找不到寫的內容了,在經(jīng)歷的初始的新知識的學習階段后,目前的階段更加轉入對于業(yè)務的理解,很多模塊在不同項目中都是可以復用的。 而且工作中發(fā)現(xiàn)開發(fā)并不強求特別酷炫的界面效果,更多的是實用的數(shù)據(jù)展示,因此button,form,table可以說是最常用的,因此后面可能會用更多的篇幅去說這塊內容的知識。
一、組件介紹
autocomplete是input組件的一個分支,專門用來處理模糊匹配的相關知識,很多時候用戶希望輸入一個單詞就可以自動匹配到相關的內容,這時候就是這個組件發(fā)揮作用的地方了。
在這里也能看到官網(wǎng)的相關介紹
二、基本原理
將輸入的名稱與字典庫進行匹配,然后輸出成功字段。
這里的匹配時存在兩種情況,一種是通過后端接口進行匹配,一種是前端進行匹配,我的感覺是如果是少量的數(shù)據(jù)可以交給前端,如果數(shù)據(jù)量過大可能后端匹配完了再輸出比較好。
三、具體實現(xiàn) 【后端實現(xiàn)法】
因為涉及到接口所以只會說一下流程,重點介紹前端實現(xiàn)。
后端匹配不需要獲取字典,你只需要把前端輸入字符傳給后端,等后端匹配好后把結果給你,然后你再將結果返回到頁面就好了。
(querySearch, cb)
是固定格式,前者代表輸入的字段,后者是個方法,代表輸出的結果
【前端實現(xiàn)法】
前端實現(xiàn)的頁面樣式與后端一樣,這里請求的@Select
是為了處理選擇后的結果
因為是前端自己處理,所以需要先獲取總字典序,將其存儲在一個變量里面
這樣可以一進入頁面就處理好總字典的內容。
具體要講一下這個
querySearch
方法中可實現(xiàn)的內容if--else
判斷是看你想不想要用戶不輸入內容也進行匹配,如果默認用戶輸入內容才開始匹配,就只要if
內的內容就好(我這里是不輸入也會匹配)上文以及提到
cb()
中輸出返回的結果,這里results
變量就是你想返回的結果,具體如何根據(jù)你的匹配方法決定,一般都是輸入一個字符返回匹配到的結果,但是也可以不這么匹配.實現(xiàn)原理是之前定義的
list
里面有label
和name
字段,你可以處理用戶輸入的時候按name
字段,輸出的是label
字段,這樣就實現(xiàn)了中英文匹配的情況.需要注意的是匹配的結果results
中的value
字段才會在頁面上展示,如果你最后返回的list沒有這個字段,頁面上是不會展示內容的,這也讓前端可以實現(xiàn)自定義展示.
最后想說明的是匹配的方法,有首字母的匹配以及模糊匹配,首字母的就是從頭開始,如果第一個字符不匹配就放棄,模糊的是如果整個字符串有能匹配的字段都會輸出,具體情況可以看演示.
首字母匹配
模糊匹配
具體方法我已經(jīng)封裝了,這里忽略大小寫
handleSelect
主要用來處理選中后的結果,如果不處理默認就是list表中的內容
四、源碼
<template> <div class="autoComplete"> <el-form style="margin:30px" label-width="180px" label-position="right"> <el-form-item label="后端進行搜索并匹配:"> <el-autocomplete placeholder="請輸入匹配內容" v-model="matchName" :fetch-suggestions="querySearchAsync"></el-autocomplete> </el-form-item> <el-form-item label="前端自行匹配:"> <el-autocomplete placeholder="請輸入匹配內容" v-model="searchName" :fetch-suggestions="querySearch" @select="handleSelect"></el-autocomplete> </el-form-item> </el-form> </div> </template>
<script> import { getCurrentInstance, onMounted, reactive, ref } from 'vue' export default { setup () { const { proxy } = getCurrentInstance() const searchName = ref('') const matchName = ref('') const totalData = ref([]) let timeOut = reactive() /**獲取總查詢表信息 */ const getList = () => { try { // 這里應該請求接口 totalData.value = list } catch (error) { proxy.$message.error(error.message) } } /**搜索結果 */ const querySearch = (querySearch, cb) => { let results = [] if (querySearch) { const findout = totalData.value.filter((x) => nameFilter(x, querySearch)) results = findout.map(x => ({ ...x, value: x.label })) } else { results = totalData.value.map(x => ({ ...x, value: x.label })) } console.log(results, '結果') clearTimeout(timeOut) timeOut = setTimeout(() => { cb(results) }, 1000); } /**選擇的結果 */ const handleSelect = (item) => { console.log(item, '選擇結果') searchName.value = "[label:" + item.label + "; name:" + item.name + "]" } /**模糊匹配方法 */ const nameFilter = (item, querySearch) => { return item.label.toLowerCase().match(querySearch.toLowerCase()) ? true : false } /**首字母匹配法 */ const firstCharFilter = (item, querySearch) => item.label.toLowerCase().indexOf(querySearch.toLowerCase()) === 0 /**請求后端接口檢索 */ const querySearchAsync = (querySearch, cb) => { let results = [] if (querySearch === '') { cb(results) } else { try { // 請求接口 const res = [] results = res cb(results) } catch (error) { proxy.$message.error(error.message) } } } onMounted(() => { getList() }) const list = [ { id: 101, label: "angle", name: "角;角度" }, { id: 102, label: "ant", name: "螞蟻" }, { id: 103, label: "apple", name: "蘋果" }, { id: 104, label: "arch", name: "拱形;弧形" }, { id: 105, label: "arm", name: "臂" }, { id: 106, label: "army", name: "軍隊" }, { id: 107, label: "baby", name: "嬰兒" }, { id: 108, label: "bag", name: "袋" }, { id: 109, label: "ball", name: "球" }, { id: 122, label: "bone", name: "骨" }, { id: 123, label: "book", name: "書" }, { id: 124, label: "boot", name: "靴" }, { id: 125, label: "bottle", name: "瓶子" }, { id: 126, label: "box", name: "箱;盒" }, { id: 127, label: "boy", name: "男孩" }, { id: 128, label: "brain", name: "腦" }, { id: 129, label: "brake", name: "煞車" }, { id: 130, label: "branch", name: "樹枝" }, { id: 131, label: "brick", name: "磚" }, { id: 132, label: "bridge", name: "橋" }, { id: 133, label: "brush", name: "刷子" }, { id: 134, label: "bucket", name: "水桶" }, { id: 135, label: "bulb", name: "球莖;燈泡" }, { id: 136, label: "button", name: "紐扣" }, { id: 150, label: "clock", name: "時鐘" }, { id: 151, label: "cloud", name: "云" }, { id: 152, label: "coat", name: "外套,大衣" }, { id: 153, label: "collar", name: "衣領" }, { id: 154, label: "comb", name: "梳子" }, { id: 155, label: "cord", name: "繩子" }, { id: 156, label: "cow", name: "母牛" }, { id: 157, label: "cup", name: "杯子" }, { id: 158, label: "curtain", name: "簾;幕" }, { id: 159, label: "cushion", name: "墊子" }, { id: 160, label: "dog", name: "狗" }, { id: 169, label: "eye", name: "眼睛" }, ] return { searchName, matchName, querySearch, handleSelect, querySearchAsync } } } </script>
總結
到此這篇關于element中el-autocomplete的常見用法的文章就介紹到這了,更多相關element el-autocomplete用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue-print-nb實現(xiàn)頁面打印功能實例(含分頁打印)
在項目中,有時需要打印頁面的表格,在網(wǎng)上找了一個打印組件vue-print-nb,用了還不錯,所以下面這篇文章主要給大家介紹了關于vue-print-nb實現(xiàn)頁面打印功能的相關資料,需要的朋友可以參考下2022-08-08Vue2.0基于vue-cli+webpack Vuex的用法(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack Vuex的用法(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導航欄和面包屑功能,基于一個新建的Vue3項目上實現(xiàn),本文結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-01-01Element Notification通知的實現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07