Vue、element 远程搜索el-autocomplete变通默认value

Vue、element 远程搜索el-autocomplete使用具体操作(完整步骤)

此远程搜索组件默认循环的值是数组中对象的value属性,而项目需求是address属性,有3种做法。
1.修改数组属性,这里就不做阐述,是对数组操作。

	 修改数组属性,这里就不做阐述,是对数组操作,和组件没关系。
mounted() {
	var list = []
	this.restaurants = this.loadAll().map(item => {
	item.value = item.address //赋予对象value属性
	return item
	})
}

2.修改组件默认属性,默认value属性我们修改成address属性

注意:*远程搜索接受的是一个数组*
<el-form-item label="授权店铺">
          <el-autocomplete
	          v-model.trim="state" //.trim是删除首尾空格
	          :clearable="true" 
	          value-key="address" //修改element默认行为,绑定属性值为address
	          :fetch-suggestions="querySearchAsync"
	          placeholder="请输入授权店铺"
	          @select="handleSelect"
          >
          </el-autocomplete>
  1. 使用插槽slot-scope
       <el-form-item label="授权店铺"> 
          <el-autocomplete
            v-model.trim="shopName"
            :clearable="true"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入授权店铺"
            @select="handleSelect"
          >
            <template slot-scope="{ item }"> //item为数组元素,Object
              <div>{{ item.address }}</div> //下拉列表显示的值已更改为address值
            </template>
          </el-autocomplete>
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2 中实现 `el-autocomplete` 下拉加载更多的方法可以通过监听 `input` 事件,在输入框中输入字符时触发一个方法来获取更多的数据。当滚动到下拉框底部时,再次触发这个方法获取更多的数据。 下面是一个简单的示例代码: ```html <template> <el-autocomplete v-model="keyword" :fetch-suggestions="querySearch" @select="handleSelect"> <template slot-scope="{ item }"> <div class="autocomplete-item">{{ item }}</div> <div v-if="isLastItem(item)">已经到底了</div> </template> </el-autocomplete> </template> <script> export default { data() { return { keyword: '', items: [ 'Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry', 'Fig', 'Grapefruit', 'Honeydew', 'Iced melon', 'Jackfruit' ], pageSize: 5, // 每页数量 page: 1 // 当前页数 } }, methods: { querySearch(queryString, cb) { const start = (this.page - 1) * this.pageSize const end = start + this.pageSize const results = this.items.slice(start, end) if (end >= this.items.length) { results.push('已经到底了') } cb(results) }, handleSelect(item) { if (this.isLastItem(item)) { // 已经到底了 } }, isLastItem(item) { return item === '已经到底了' } }, watch: { keyword(val) { if (val) { this.page = 1 this.querySearch(val, (results) => { this.$refs.autocomplete.suggestions = results }) } } }, mounted() { const input = this.$refs.autocomplete.$refs.input input.addEventListener('scroll', () => { if (input.scrollHeight - input.scrollTop === input.clientHeight) { // 到达底部 if (!this.isLastItem(this.$refs.autocomplete.suggestions[this.$refs.autocomplete.suggestions.length - 1])) { this.page++ this.querySearch(this.keyword, (results) => { this.$refs.autocomplete.suggestions = this.$refs.autocomplete.suggestions.concat(results) }) } } }) } } </script> ``` 在这个示例中,我们在 `querySearch` 方法中通过 `this.page` 和 `this.pageSize` 计算出当前需要展示的数据范围。如果已经到达数据末尾,我们返回一个特殊的字符串 `'已经到底了'` 作为提示。 在 `handleSelect` 方法中,我们判断用户是否选择了最后一个提示项 `'已经到底了'`,如果是则停止加载更多数据。 在 `watch` 中,我们监听输入框的值变化,并调用 `querySearch` 方法获取第一页数据。 在 `mounted` 中,我们通过 `input.addEventListener('scroll')` 监听输入框的滚动事件,当滚动到底部时,判断当前的提示项是否为 `'已经到底了'`,如果不是则继续加载更多数据。注意要在 `this.$refs.autocomplete.suggestions` 中使用 `concat` 方法将新的数据合并到已有的数据中。 以上就是一个简单的实现 `el-autocomplete` 下拉加载更多的示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值