用户远程搜索组件
<template>
<el-select v-model="valueTmp" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" clearable :disabled="disabled" @change="onchange" @clear="onClear">
<el-option v-for="item in options" :key="item.id" :label="item.employeeCode+'-'+item.employeeName" :value="item.id">
</el-option>
</el-select>
</template>
<script>
import { getEmpSelect } from '@/api/human/employee'
export default {
props: {
disabled: {
type: Boolean,
default: false
},
value: {
type: Number,
default: null
},
//
queryType: {
type: Number,
default: 0
}
},
data() {
return {
valueTmp: null,
options: [],
loading: false
}
},
watch: {
value: {
handler(val) {
this.valueTmp = val
this.$nextTick(()=>{
if (val) {
this.remoteMethod(null, val)
} else {
this.remoteMethod(null)
}
})
}
},
valueTmp(val) {
this.$emit('input', val)
}
},
mounted() {
this.remoteMethod()
},
methods: {
remoteMethod(query, id) {
if (query !== '') {
this.loading = true;
let req = {
id: id,
employeeName: query,
queryType: this.queryType,
pageNum: 1,
pageSize: 20
}
getEmpSelect(req).then((rsp)=>{
this.options = rsp.data
this.loading = false;
})
} else {
this.options = [];
}
},
onchange(val) {
let row = this.options.find(item=>item.id === val)
this.$emit('change', val, row)
},
onClear() {
this.$emit('input', null)
}
}
}
</script>
使用
<select-employee ref="empSelect" v-model="queryForm.maintenanceLeaderId" />