1.

<el-select v-if="isEdit" v-model="form.employerIds" multiple filterable remote reserve-keyword placeholder="請輸入關鍵詞" @change="changeEmployerIds" :remote-method="getRemote" > <el-option v-for="iteminemployerOptions" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> <spanv-if="!isEdit">{{form.employers&&form.employers.map(item=>item.name).join('/')}}</span> 2. //遠端搜尋方法 getRemote(font){ if(font!=''){ getEmployer({name:font}).then(res=>{ this.employerOptions=res }) }else{ this.employerOptions=[] } }, changeEmployerIds(v){ this.$forceUpdate() } 3. //編輯 editInfo(){ this.isEdit=true this.form.employerIds=this.form.employers.map(v=>v.id) this.employerOptions=this.form.employers } 別人的寫法: 1. <el-form-itemlabel="工作單位"prop="employerIds"> <el-select v-if="isEditing" v-model="profileForm.employerIds" multiple filterable remote reserve-keyword placeholder="請輸入關鍵詞" @change="changeEmployerIds" :remote-method="remoteMethod" > <el-option v-for="iteminmultipleSelectOption" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> <span v-else class="holder" >{{profileForm.employers&&profileForm.employers.map(item=>item.name).join('/')}}</span> </el-form-item> 2. //遠端搜尋 remoteMethod(queryString){ if(queryString!==''){ findEmployeeByNames({name:queryString}).then(res=>{ this.multipleSelectOption=Array.from(newSet(res.concat(this.checkedEmployer))) }) }else{ this.multipleSelectOption=[] } }, changeEmployerIds(){ this.checkedEmployer=this.multipleSelectOption.filter(item=>{ returnthis.profileForm.employerIds.includes(item.id) }) }, 3. //把原表單內容存一份到備份後開啟編輯模式 enableEdit(){ Object.assign(this.profileFormBackup,this.profileForm) this.profileForm.employerIds=this.profileForm.employers.map(v=>v.id) this.multipleSelectOption=this.profileForm.employers this.changeEmployerIds() this.$refs['profileFormEl'].clearValidate() this.isEditing=true },