Shulou(Shulou.com)06/01 Report--

This article mainly introduces how vue adds drop-down paging to el-autocomplete secondary packaging, which is very detailed and has a certain reference value. Friends who are interested must read it!

The Lenovo input boxes in the project are now implemented using el-autocomplete, but with the increasing amount of data, the product requires not to return all the Lenovo data at one time, but to do paging processing, so you need to add a paging function.

Note: to understand the following code, you need to learn vue and element first.

Complete code

Export default {name: 'InputLoadMore', props: {/ / encapsulated data lookup method getOptionFn: {require: true}, / / Lenovo key searchKey: {type: String, require: true}, / / v-model binding value value: {type: String, require: true}, / / placehoder placeholder: {type: String Default: 'please enter'}}, data () {return {state:'', loading: false, page: 1, pageTotal: 0}}, watch: {state (val) {this.$emit ('input', val)}, value (val) {this.state = val}}, directives: {/ / Custom instruction Monitor the scrolling of the drop-down box Scroll to the bottom to load the next page 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 = > {/ / pay attention to the use of load Throttling let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 10-listDom.offsetHeight if (condition > 0 & &! vnode.context.loading) {/ / scrolling to the bottom executes the scrolling method load,binding.value, which is the value bound by v-scrollLoad Add () to the method 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}) / / modify the following code according to the actual situation Display data 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) {} / / load more async selectLoadMore () {if (Number (this.pageTotal) {return {value: item}}) / / add data to the drop-down list 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}

The following is to explain the main places.

1. Custom instructions implement drop-down loading more.

Main code

/ / Custom instruction to monitor the scrolling of the drop-down box Scroll to the bottom to load the next page 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 = > {/ / pay attention to the use of load Throttling let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 10-listDom.offsetHeight if (condition > 0 & &! vnode.context.loading) {/ / scrolling to the bottom executes the scrolling method load,binding.value, which is the value bound by v-scrollLoad Add () to indicate the method binding.value ()}}, false)} that performs the binding

The above are mainly bind hooks that use vue's custom instructions. If you don't know much about it, you can take a look at this https://cn.vuejs.org/v2/guide/custom-directive.html first. Bind has four parameters (el, binding, vnode, oldVnode). Here, el represents the bound element and is used to manipulate dom, which is used to add scroll events and to calculate whether the drop-down box slides to the bottom (note the + 10 height in the calculation). Binding is an object that contains old values, new values, instruction names, and so on. Here, the binding value value is mainly used to perform more loading methods. "Vnode" refers to a virtual node. Here, its context is this control loading to throttle.

two。 Add props (getOptionFn, searchKey, value, placeholder) pull-out services. Become a common component

GetOptionFn is a method encapsulated by an interface. Both fetch-suggestions and loading more are needed.

SearchKey indicates the key of the parameters to be passed by the interface, and the key of different interfaces may be different.

Value is the binding value of the external v-modle. Pay attention to setting the value in the watch. If you don't know, you can take a look at the implementation principle of v-model.

Placeholder does not explain

3. It may need to be explained.

How do I add input to the drop-down after loading more data?

This.$refs ['autocomplete']. $data.suggestions / / drop-down list

How to avoid loading more after loading.

Here is the quantity comparison, you can also add an identifier, set it to true after loading, and set to false after changing the condition.

If (Number (this.pageTotal))

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.