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>