【vue3】element-plus下拉选择二次封装，实现远程搜索和下拉加载

最新推荐文章于 2024-10-12 13:37:44 发布

浅言陌语

最新推荐文章于 2024-10-12 13:37:44 发布

阅读量1.4k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40305332/article/details/136915510

本文介绍了如何在Vue项目中封装一个支持远程搜索和无限滚动的el-select组件，通过自定义方法调用API获取数据并动态更新选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装组件代码

<template>
  <el-select v-bind="$attrs" :remote-method="remoteMethod">
    <div v-infinite-scroll="loadMore" style="overflow: hidden">
      <el-option v-for="dict in list" :key="dict.value" :label="dict.label" :value="dict.value" />
    </div>
  </el-select>
</template>

<script lang="ts" setup name="ScorllSelect">
import { ref } from 'vue'
import { debounce } from '@/utils/index'

interface Item {
  value: number,
  label: string
}

const props = defineProps({
  // 传入对应的列表加载api
  methods: {
    type: Function,
    default: ''
  },
  // 传入查询关键字
  searchKey: {
    type: String,
    default: ''
  }
})

const list = ref<Item[]>([])
const queryFrom = ref({
  page: 1,
  totlePage: 1,
  pageSize: 10
})

// 自定义远程搜索方法
const remoteMethod = (query: string) => {
  queryFrom.value.page = 1
  list.value = []
  queryFrom.value[props.searchKey] = query
  getList()
}

// 调用props.methods获取下拉数