在Vue项目中，经常需要实现带有分页功能的下拉选择器组件，以满足用户在大量数据中选择项的需求。本文将介绍如何封装一个Vue组件，该组件结合了分页和搜索功能，使得用户可以在大量数据中快速找到并选择所需项。
组件概述
该组件名为SelectWithPage，它将整合Element UI的<el-select>下拉选择器和<el-pagination>分页组件，以实现一个功能丰富的下拉选择器。用户可以通过搜索来过滤选项，并通过分页来浏览结果。
组件结构
SelectWithPage组件主要包括以下几个部分：
- 下拉选择框：使用
<el-select>展示选项，并支持搜索。 - 搜索输入框：用于输入搜索关键词，过滤选项。
- 分页组件：使用
<el-pagination>进行分页控制。 - 数据请求与处理：根据用户的搜索和分页请求，从后端获取数据并更新组件状态。
组件模板
<template> <el-select v-model="selectedValue" filterable remote :remote-method="handleSearch" :loading="loading" style="width: 100%" placeholder="请选择" > <el-option v-for="item in options" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" ></el-option> <el-option v-if="options.length === 0 && !loading" value="" disabled > 无数据 </el-option> </el-select> <el-pagination v-if="total > pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" ></el-pagination> </template>
组件脚本
<script> export default { name: 'SelectWithPage', props: { valueKey: { type: String, default: 'id' }, labelKey: { type: String, default: 'name' }, searchKey: { type: String, default: 'search' }, otherParams: { type: Object, default: () => ({}) }, requestUrl: { type: Function, required: true }, pageSize: { type: Number, default: 10 }, value: { default: null } }, data() { return { selectedValue: this.value, options: [], loading: false, total: 0, currentPage: 1 }; }, watch: { value(newVal) { this.selectedValue = newVal; }, currentPage(newVal) { this.fetchData(); }, pageSize(newVal) { this.currentPage = 1; // Reset page when page size changes this.fetchData(); } }, methods: { handleSearch(queryString) { this.otherParams[this.searchKey] = queryString; this.currentPage = 1; // Reset page when searching this.fetchData(); }, handleSizeChange(val) { this.pageSize = val; }, handleCurrentChange(val) { this.currentPage = val; }, fetchData() { this.loading = true; this.requestUrl({ ...this.otherParams, page: this.currentPage, limit: this.pageSize }).then(res => { this.options = res.data.records; this.total = res.data.total; this.loading = false; }).catch(error => { console.error('Failed to fetch data:', error); this.loading = false; }); }, // 同步父组件的selectedValue syncSelectedValue(newValue) { this.$emit('update:select-value', newValue); } }, mounted() { this.fetchData(); // 初始化时加载数据 }, computed: { // 计算属性，用于同步父组件的value syncValue: { get() { return this.selectedValue; }, set(value) { this.selectedValue = value; this.syncSelectedValue(value); } } } }; </script>
组件样式
通常，<el-select>和<el-pagination>的样式已经足够使用，但如果需要自定义样式，可以在组件的<style>部分进行添加。例如，调整下拉选择框的宽度或分页组件的布局等。
使用组件
在父组件中，你可以这样使用SelectWithPage组件：
<template> <div> <select-with-page :value-key="id" :label-key="name" :search-key="name" :other-params="{ sblx: 'chjc' }" :requestUrl="fetchDeviceData" :select-value.sync="selectedId" style="width: 225px;" /> </div> </template> <script> import SelectWithPage from './components/SelectWithPage.vue'; export default { components: { SelectWithPage }, data() { return { selectedId: null }; }, methods: { fetchDeviceData(params) { // 发送请求到后端，根据params获取数据 // 返回Promise，解析为包含records和total的对象 return new Promise((resolve, reject) => { // 模拟异步请求 setTimeout(() => { const data = { records: [ // 模拟数据 { id: 1, name: '名称1' }, { id: 2, mane: '名称2' } // ... ], total: 100 // 假设总记录数为100 }; resolve(data); }, 1000); }); } } }; </script>
这样，你就成功封装了一个带有分页和搜索功能的下拉选择器组件，并在父组件中进行了使用。通过调整SelectWithPage组件的props和methods，你可以轻松地将其应用到其他类似的场景中。
