vue對el-autocomplete二次封裝增加下拉分頁
更新時間：2022年03月08日 11:11:32 作者：rambler_wang
項目中的聯(lián)想輸入框現(xiàn)在都是采用的el-autocomplete實(shí)現(xiàn)的，但是數(shù)據(jù)增多就會需要做分頁處理，本文主要介紹了vue對el-autocomplete二次封裝增加下拉分頁，感興趣的可以了解一下
項目中的聯(lián)想輸入框現(xiàn)在都是采用的el-autocomplete實(shí)現(xiàn)的，但是隨著數(shù)據(jù)量越來越多，產(chǎn)品要求一次不要返回所有的聯(lián)想數(shù)據(jù)，要做分頁處理，所以需要添加一個分頁的功能。
注：看懂下面的代碼需要先對vue和element有一定的學(xué)習(xí)。
廢話不多數(shù)，先上完整代碼
<template>
<el-autocomplete
ref="autocomplete"
value-key="value"
v-scrollLoad="selectLoadMore"
v-loading="loading"
v-model="state"
:fetch-suggestions="querySearch"
:placeholder="placeholder"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
</template>
<script>
export default {
name: 'InputLoadMore',
props: {
// 封裝的查數(shù)據(jù)方法
getOptionFn: {
require: true
},
// 后端定義的聯(lián)想的key
searchKey: {
type: String,
require: true
},
// v-model的綁定值
value: {
type: String,
require: true
},
// placehoder
placeholder: {
type: String,
default: '請輸入'
}
},
data() {
return {
state: '',
loading: false,
page: 1,
pageTotal: 0
}
},
watch: {
state(val) {
this.$emit('input', val)
},
value(val) {
this.state = val
}
},
directives: {
// 自定義指令，監(jiān)聽下拉框的滾動，滾動到底部就加載下一頁
scrollLoad: {
bind(el, binding, vnode) {
let wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
let listDom = el.querySelector('.el-autocomplete-suggestion__wrap .el-autocomplete-suggestion__list')
wrapDom.addEventListener(
'scroll',
e => {
// 注意load的使用，節(jié)流
let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 10 - listDom.offsetHeight
if (condition > 0 && !vnode.context.loading) {
//滾動到底部則執(zhí)行滾動方法load，binding.value就是v-scrollLoad綁定的值，加()表示執(zhí)行綁定的方法
binding.value()
}
},
false
)
}
}
},
methods: {
async querySearch(queryString, cb) {
this.page = 1
this.loading = true
try {
let { result } = await this.getOptionFn({
page: 1,
pageSize: 50,
[this.searchKey]: queryString
})
// 根據(jù)實(shí)際情況修改下面的代碼，展示數(shù)據(jù)
if (result.rows) {
let arr = []
result.rows.forEach(item => {
arr.push({ value: item })
})
cb(arr)
} else {
cb([])
}
this.pageTotal = result.total || 0
} catch(e) {
// console.log(e)
} finally {
this.loading = false
}
},
handleSelect(item) {},
// 加載更多
async selectLoadMore() {
if(Number(this.pageTotal) <= this.$refs['autocomplete'].$data.suggestions.length) {
return
}
this.page = this.page + 1
this.loading = true
try {
let { result } = await this.getOptionFn({
page: this.page,
pageSize: 50,
[this.searchKey]: this.state
})
// 根據(jù)實(shí)際情況修改下面的代碼，展示數(shù)據(jù)
if (result.rows) {
const arr = result.rows.map(item => {
return { value: item }
})
// 將數(shù)據(jù)添加到下拉列表
this.$refs['autocomplete'].$data.suggestions = this.$refs['autocomplete'].$data.suggestions.concat(arr)
}
this.pageTotal = result.total || 0
} catch(e) {
// console.log(e)
} finally {
this.loading = false
}
}
}
}
</script>
</script>下面對主要的地方進(jìn)行講解。
1.自定義指令實(shí)現(xiàn)下拉加載更多。
主要代碼
// 自定義指令，監(jiān)聽下拉框的滾動，滾動到底部就加載下一頁
scrollLoad: {
bind(el, binding, vnode) {
let wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
let listDom = el.querySelector('.el-autocomplete-suggestion__wrap .el-autocomplete-suggestion__list')
wrapDom.addEventListener(
'scroll',
e => {
// 注意load的使用，節(jié)流
let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 10 - listDom.offsetHeight
if (condition > 0 && !vnode.context.loading) {
//滾動到底部則執(zhí)行滾動方法load，binding.value就是v-scrollLoad綁定的值，加()表示執(zhí)行綁定的方法
binding.value()
}
},
false
)
}上面主要是運(yùn)用了vue的自定義指令的bind鉤子。不太了解的可以先看這個https://cn.vuejs.org/v2/guide/custom-directive.html 。bind有四個參數(shù)（el、binding、vnode、oldVnode）這里用前三個，el代表綁定的元素，用來操作dom，這里用來添加scroll事件，以及計算下拉框是否滑動到底部（注意計算中的+10高度）；binding是一個對象，包含舊值、新值、指令名等，這里主要用綁定值value，用來執(zhí)行加載更多的方法；Vnode指的是虛擬節(jié)點(diǎn)，這里取他的context即為this控制loading來節(jié)流。
2.增加props（getOptionFn、searchKey、value、placeholder）抽離業(yè)務(wù)。成為公共組件
- getOptionFn為接口封裝的方法。fetch-suggestions和加載更多里面都要用到
- searchKey表示接口需要傳的參數(shù)的key，不同的接口的key可能不一致。
- value是外面v-modle的綁定值，注意在watch里面設(shè)置值，不知道的可以看看v-model的實(shí)現(xiàn)原理。
- placeholder不解釋
3.可能需要解釋的
- 在加載到更多數(shù)據(jù)后怎么把輸入加到下拉里面？
this.$refs['autocomplete'].$data.suggestions // 下拉的列表
- 怎么避免加載完了還加載更多。
這里是用的數(shù)量比較，也可以加一個標(biāo)識符，加載完了設(shè)置為true，變化條件后設(shè)為false。
if(Number(this.pageTotal) <= this.$refs['autocomplete'].$data.suggestions.length) {
return
}到此這篇關(guān)于vue對el-autocomplete二次封裝增加下拉分頁的文章就介紹到這了,更多相關(guān)vue el-autocomplete下拉分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了簡單了解vue.js數(shù)組的常用操作,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10
Vue如何處理Axios多次請求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請求數(shù)據(jù)顯示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue-cli 3 全局過濾器的實(shí)例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue使用recorder-core.js實(shí)現(xiàn)錄音功能
這篇文章主要介紹了vue如何使用recorder-core.js實(shí)現(xiàn)錄音功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了typescript中this報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色
這篇文章主要介紹了Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色效果，首先定義好樣式，利用v-for中的index值，然后綁定樣式來實(shí)現(xiàn)隔行變色,需要的朋友可以參考下2018-08-08
新手vue構(gòu)建單頁面應(yīng)用實(shí)例代碼
本篇文章主要介紹了新手vue構(gòu)建單頁面應(yīng)用實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue.js 響應(yīng)接口的相關(guān)資料，文中實(shí)例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
watch 函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于Vue3中watch監(jiān)聽使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08