Vue封装分页下拉选择器的组件

在Vue项目中，经常需要实现带有分页功能的下拉选择器组件，以满足用户在大量数据中选择项的需求。本文将介绍如何封装一个Vue组件，该组件结合了分页和搜索功能，使得用户可以在大量数据中快速找到并选择所需项。

组件概述

该组件名为SelectWithPage，它将整合Element UI的<el-select>下拉选择器和<el-pagination>分页组件，以实现一个功能丰富的下拉选择器。用户可以通过搜索来过滤选项，并通过分页来浏览结果。

组件结构

SelectWithPage组件主要包括以下几个部分：

1. 下拉选择框：使用<el-select>展示选项，并支持搜索。
2. 搜索输入框：用于输入搜索关键词，过滤选项。
3. 分页组件：使用<el-pagination>进行分页控制。
4. 数据请求与处理：根据用户的搜索和分页请求，从后端获取数据并更新组件状态。

组件模板

<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，你可以轻松地将其应用到其他类似的场景中。