远程搜索及下拉多选
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="item in employerOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<span v-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-item label="工作单位" 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="item in multipleSelectOption"
: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(new Set(res.concat(this.checkedEmployer)))
})
} else {
this.multipleSelectOption = []
}
},
changeEmployerIds() {
this.checkedEmployer = this.multipleSelectOption.filter(item => {
return this.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
},
