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

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

组件概述

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

组件结构

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

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

组件模板

javascript 复制代码
<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>

组件脚本

javascript 复制代码
<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组件:

javascript 复制代码
<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,你可以轻松地将其应用到其他类似的场景中。

相关推荐
GIS程序媛—椰子18 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据1 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
理想不理想v2 小时前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记2 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜2 小时前
Vue实现登录功能
前端·javascript·vue.js
杨荧2 小时前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka