el autocomplete支持分页上拉加载使用详解

下面是详细讲解“el autocomplete支持分页上拉加载使用详解”的完整攻略：

什么是el autocomplete？

el autocomplete 是 element-ui 组件库提供的可输入下拉选择框组件，可以根据用户输入的数据进行联想提示，提升用户的选择效率。当列表数据量很大的时候，很多时候我们希望能够进行分页和上拉加载，从而提高性能，减少一次性加载太多数据而导致页面卡顿的问题。

如何使用el autocomplete进行分页上拉加载？

使用 el autocomplete 进行分页上拉加载需要通过几个步骤来实现：

第一步，需要制定数据源

el autocomplete 组件需要接收一个数据源，这个数据源可以是一个数组，也可以是一个异步请求。在分页和上拉加载的情况下，我们通常采用异步请求的方式来获取数据。下面是一个例子，使用 axios 库发起一个请求来获取远程数据：

javascript axios.get('/api/getList', { params: { page: 1, size: 10 } }).then(response => { console.log(response.data) })

第二步，定义 el autocomplete 模板

在定义 el autocomplete 组件的时候，需要定义模板，这个模板会影响 el autocomplete 的显示效果。下面是一段基本的模板代码：

html <template slot-scope="{ value }"> <div class="item">{{ value }}</div> </template>

在这个模板中，我们定义了显示 el autocomplete 的每一行数据的样式。在实际使用中，我们可以根据自己的需求修改模板代码。

第三步，实现分页和上拉加载

在定义 el autocomplete 的时候，我们需要设置 fetch-suggestions 属性来指定如何获取数据。这个属性接收一个方法，这个方法需要返回一个 Promise 对象，用于异步请求获取数据。下面是一个例子：

```html
<el-autocomplete
v-model="value"
:fetch-suggestions="querySearchAsync"
placeholder="请输入关键字"
@select="handleSelect"

 <template slot-scope="{ item }">
   <div class="item">{{ item }}</div>
 </template>

```

在这个例子中，我们在 el-autocomplete 标签上设置了 fetch-suggestions 属性，这个属性指向了一个方法名为 querySearchAsync 的函数。这个函数会发起一个异步请求，获取数据，并返回 Promise 对象。

第四步，完善代码

在上述步骤中，我们只实现了获取数据和分页上拉加载的基本功能。如果想要更好的使用 el autocomplete，我们还需要完善以下几点：

设置 debounce 属性，避免在用户快速输入关键字时频繁地发送请求，可以提高性能
实现输入时即时搜索功能，可以在用户输入字符时即时展示匹配结果
根据返回结果的情况设置 loading 属性，避免在请求数据时用户误操作
根据返回结果的情况设置 no-more 或 no-data 属性，避免在没有更多数据或没有数据时用户误操作

示例说明

下面是两个示例说明：

示例1

在这个示例中，我们通过 el autocomplete 实现了在输入关键字时即时展示匹配结果的功能。具体代码如下：

<template>
  <div class="autocomplete-demo">
    <el-autocomplete
      v-model="value"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入关键字"
      :debounce="300"
      @select="handleSelect"
      :loading="loading"
      :no-more="noMore"
    >
      <template slot-scope="{ item }">
        <div class="item">{{ item }}</div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      value: '',
      loading: false,
      noMore: false,
      list: [],
      page: 1,
      size: 10
    }
  },
  methods: {
    querySearchAsync(queryString, cb) {
      if (!queryString) {
        cb([])
        return
      }
      this.loading = true
      axios.get('/api/getList', {
        params: {
          page: this.page,
          size: this.size,
          keyword: queryString
        }
      }).then(res => {
        if (res.data.count < this.size) {
          this.noMore = true
        }
        if (res.data.list.length > 0) {
          this.list = this.list.concat(res.data.list)
        } else {
          this.loading = false
        }
        cb(this.list)
        this.loading = false
      })
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

示例2

在这个示例中，我们通过 el autocomplete 实现了带有分页和上拉加载功能的功能。具体代码如下：

<template>
  <div class="autocomplete-demo">
    <el-autocomplete
      v-model="value"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入关键字"
      :debounce="300"
      @select="handleSelect"
      :loading="loading"
      :no-more="noMore"
    >
      <template slot-scope="{ item }">
        <div class="item">{{ item }}</div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      value: '',
      loading: false,
      noMore: false,
      list: [],
      page: 1,
      size: 10
    }
  },
  methods: {
    querySearchAsync(queryString, cb) {
      if (!queryString) {
        cb([])
        return
      }
      this.loading = true
      axios.get('/api/getList', {
        params: {
          page: this.page,
          size: this.size,
          keyword: queryString
        }
      }).then(res => {
        if (res.data.count < this.size) {
          this.noMore = true
        }
        if (res.data.list.length > 0) {
          this.list = this.list.concat(res.data.list)
        } else {
          this.loading = false
        }
        cb(this.list)
        this.loading = false
      })
    },
    handleSelect(item) {
      console.log(item)
    }
  },
  mounted() {
    this.$refs.autocomplete.$refs.input.addEventListener('keyup', (e) => {
      if (e.key === 'Enter') {
        this.page = 1
        this.list = []
        this.noMore = false
        this.loading = false
      }
    })
    this.$refs.autocomplete.$refs.popper.addEventListener('scroll', (e) => {
      const { scrollTop, clientHeight, scrollHeight } = e.currentTarget
      if (scrollTop + clientHeight >= scrollHeight - 20 && !this.loading && !this.noMore) {
        this.page++
        this.querySearchAsync(this.value, (list) => {})
      }
    })
  }
}
</script>

这里的示例代码使用 Vue.js 和 Element-UI 组件库，其中：

axios 用于发送 ajax 请求，获取数据
@select 用于监听用户的选中事件并返回选中的值
:debounce 属性用于设置用户输入时发送请求的时间间隔
:loading 和 :no-more 属性用于判断是否正在加载数据、是否还有更多数据加载
@keyup 事件用于监听用户输入的回车键，并更新页面数据
@scroll 事件用于监听滚动事件，实现分页和上拉加载

以上就是关于如何使用el autocomplete进行分页上拉加载的详细攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：el autocomplete支持分页上拉加载使用详解 - Python技术站

el autocomplete支持分页上拉加载使用详解

什么是el autocomplete？

如何使用el autocomplete进行分页上拉加载？

示例说明

示例1

示例2

相关文章