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>