Last active
March 30, 2019 05:13
-
-
Save meilihao/3d6319afe58dc714d9f0e6f19b1c2199 to your computer and use it in GitHub Desktop.
vue lodash延迟搜索
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// element-ui | |
<template> | |
<span> | |
<el-select | |
v-model="groupName" | |
filterable | |
remote | |
reserve-keyword | |
placeholder="请输入主账号名称" | |
:remote-method="handleSearch" | |
:loading="loading" | |
@change="handleChange" | |
> | |
<el-option v-for="item in groupDatas" :key="item.id" :label="item.name" :value="item.name" /> | |
</el-select> | |
</span> | |
</template> | |
<script> | |
import debounce from 'lodash/debounce' | |
export default { | |
name: 'GroupFetch', | |
props: { | |
queryParam: { | |
type: Object, | |
required: true | |
} | |
}, | |
data () { | |
return { | |
loading: false, | |
groupName: '', | |
groupDatas: [] | |
} | |
}, | |
created () { | |
this.debouncedGetGroup = debounce(this.fetchGroupData, 500) | |
}, | |
methods: { | |
handleChange (name) { | |
this.queryParam.group_id = this.groupDatas.find(item => item.name === name).id | |
}, | |
handleSearch (name) { | |
this.loading = true | |
this.debouncedGetGroup(name) | |
}, | |
fetchGroupData (name) { | |
const _that = this | |
_that.$axios.get(`/groups?name=${name}&page_size=10`) | |
.then((d) => { | |
console.log(d) | |
const result = d.data | |
_that.groupDatas = [] | |
result.forEach((r) => { | |
_that.groupDatas.push({ | |
name: r.name, | |
id: r.id | |
}) | |
}) | |
}) | |
this.loading = false | |
} | |
} | |
} | |
</script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment