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

本文介绍了在Vue项目中,如何利用Element UI的el-autocomplete组件实现远程搜索,并针对项目需求将默认搜索值由value改为address属性。提供了三种解决方案:1) 修改数组对象属性;2) 修改组件的value-key属性;3) 使用插槽自定义显示内容。详细步骤和代码示例帮助开发者理解并应用到实际项目中。
摘要由CSDN通过智能技术生成

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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值