输入框滚动加载与搜索如何进行封装？-灵析社区

封装： {{ item[labelKey] }} import _ from "lodash"; export default { props: { placeholder: String, apiFunction: { type: Function, required: true, }, queryParams: Object, valueKey: { type: String, default: 'id', }, labelKey: { type: String, default: 'name', }, initialCount: { type: Number, default: 10, }, }, data() { return { selectedValue: null, list: [], count: this.initialCount, page: 1, total: 0, }; }, watch: { selectedValue(value) { this.$emit('input', value); }, queryParams: { deep: true, handler() { this.getList(); }, }, }, created() { this.getList(); }, methods: { async getList(searchValue = "", page = 1) { try { const response = await this.apiFunction({ page, rows: searchValue ? 0 : this.count, name: searchValue, }); this.list = searchValue ? response.data.rows : [...this.list, ...response.data.rows]; this.total = response.data.total; } catch (error) { console.error(error); } }, handleSearch: _.debounce(function (value) { this.getList(value); }, 500), handlePopupScroll: _.debounce(function (e) { const { target } = e; const { scrollTop, scrollHeight, offsetHeight } = target; if (this.page * this.count = scrollHeight) { this.page += 1; this.getList("", this.page); } }, 500), }, };