|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
<template> |
|
|
|
|
<el-autocomplete |
|
|
|
|
<!-- <el-autocomplete |
|
|
|
|
v-model="text" |
|
|
|
|
:fetch-suggestions="querySearchAsync" |
|
|
|
|
:value-key="config.valueKey" |
|
|
|
@ -7,7 +7,26 @@ |
|
|
|
|
clearable |
|
|
|
|
@select="selectAutocomplete" |
|
|
|
|
@clear="params[config.querykey] = ''" |
|
|
|
|
></el-autocomplete> |
|
|
|
|
></el-autocomplete> --> |
|
|
|
|
|
|
|
|
|
<el-select |
|
|
|
|
v-model="params[config.querykey]" |
|
|
|
|
filterable |
|
|
|
|
remote |
|
|
|
|
clearable |
|
|
|
|
reserve-keyword |
|
|
|
|
:placeholder="config.placeholder" |
|
|
|
|
:remote-method="remoteMethod" |
|
|
|
|
@clear="list = []" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in list" |
|
|
|
|
:key="item.id + index" |
|
|
|
|
:label="item[config.labelKey]" |
|
|
|
|
:value="item[config.valueKey]" |
|
|
|
|
> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
@ -17,37 +36,67 @@ export default { |
|
|
|
|
config: Object, |
|
|
|
|
// config: { |
|
|
|
|
// serveTarget: {}, // 远程搜索接口 |
|
|
|
|
// autocomplateKey: "", //远程搜索接口参数名 |
|
|
|
|
// autocompleteKey: "", //远程搜索接口参数名 |
|
|
|
|
// labelKey: "", //接口返回数据label名 |
|
|
|
|
// valueKey: "", //接口返回数据唯一值 |
|
|
|
|
// querykey: "", //查询接口参数名 |
|
|
|
|
// }, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
text: "", |
|
|
|
|
list: [], |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
console.log("params", this.params); |
|
|
|
|
watch: { |
|
|
|
|
"config.echoId": { |
|
|
|
|
handler(nval, oval) { |
|
|
|
|
if (nval) { |
|
|
|
|
console.log(nval); |
|
|
|
|
this.remoteMethod(this.config.echoName); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
deep: true, |
|
|
|
|
immediate: true, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 远程搜索 |
|
|
|
|
querySearchAsync(queryString, cb) { |
|
|
|
|
if (queryString) { |
|
|
|
|
remoteMethod(query) { |
|
|
|
|
if (query !== "") { |
|
|
|
|
this.loading = true; |
|
|
|
|
let params = {}; |
|
|
|
|
params[this.config.autocompleteKey] = queryString; |
|
|
|
|
params[this.config.autocompleteKey] = query; |
|
|
|
|
this.config.serveTarget(params).then((res) => { |
|
|
|
|
let timeInstance = setTimeout(() => { |
|
|
|
|
this.loading = false; |
|
|
|
|
clearTimeout(timeInstance); |
|
|
|
|
if (res.data.length) { |
|
|
|
|
cb(res.data); |
|
|
|
|
} else cb([]); |
|
|
|
|
this.list = res.data; |
|
|
|
|
} else this.list = []; |
|
|
|
|
}, 1000 * Math.random()); |
|
|
|
|
}); |
|
|
|
|
} else cb([]); |
|
|
|
|
}, |
|
|
|
|
selectAutocomplete(item) { |
|
|
|
|
this.params[this.config.querykey] = item.id; |
|
|
|
|
} else { |
|
|
|
|
this.list = []; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// querySearchAsync(queryString, cb) { |
|
|
|
|
// if (queryString) { |
|
|
|
|
// let params = {}; |
|
|
|
|
// params[this.config.autocompleteKey] = queryString; |
|
|
|
|
// this.config.serveTarget(params).then((res) => { |
|
|
|
|
// let timeInstance = setTimeout(() => { |
|
|
|
|
// clearTimeout(timeInstance); |
|
|
|
|
// if (res.data.length) { |
|
|
|
|
// cb(res.data); |
|
|
|
|
// } else cb([]); |
|
|
|
|
// }, 1000 * Math.random()); |
|
|
|
|
// }); |
|
|
|
|
// } else cb([]); |
|
|
|
|
// }, |
|
|
|
|
// selectAutocomplete(item) { |
|
|
|
|
// this.params[this.config.querykey] = item.id; |
|
|
|
|
// }, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|