el-select下拉数据实时查询（分页查询滚动加载）

原创已于 2022-12-28 15:10:07 修改 · 831 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui

于 2022-11-22 13:04:55 首次发布

el-select 同时被 2 个专栏收录

5 篇文章

订阅专栏

elementui

5 篇文章

订阅专栏

本文介绍了一个基于Element UI的产品选择组件实现细节，包括如何通过远程搜索加载产品列表，并实现了列表的滚动加载更多功能。

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

<template>	
            <el-form-item label="产品" prop="productCode">
              <el-select v-model="form.productCode" placeholder="请选择产品" filterable remote :remote-method="queryProduct" clearable @focus="(event)=>queryProduct()" v-loadmore="loadMore"
                style="width: 100%" @change="setProductInfo">
                <el-option v-for="(s,index) in productList" :key="index" :label="s.cdesc" :value="s.itemno">
                  <name-code :name="s.itemno" :code="s.cdesc" />
                </el-option>
              </el-select>
            </el-form-item>
</template>


<script>
import { listProduct } from '@/api/baseData/product'
export default {
 data(){
    return{
      //产品代码下拉列表加载
      loadProduct: false,
      //产品代码列表
      productList: [],
      productQueryParams: {
        status: 'T',
        searchValue: null,
        pageNum: 1,
        pageSize: 20,
      },
      proTotal: 0,	
    }
  }, 
  created() {
    this.getList()
    this.queryCurreny()
    this.querySp()
    this.queryProduct()
    // this.queryQuotation()
    this.tableHeight = this.changeHeight()
    listUnit({ corpId: this.$store.getters.corpid }).then((res) => {
      this.unitList = res.rows
    })
  }, 
methods:{

    /** 查询产品列表 */
    queryProduct(v) {
      this.loadProduct = true
      this.productQueryParams.searchValue = v
      this.productQueryParams.pageNum = 1
      listProduct(this.productQueryParams).then((res) => {
        this.productList = res.rows
        this.loadProduct = false
        this.proTotal = res.total
      })
    },
    
    loadMore() {
      if (this.proTotal == this.productList.length) {
        return
      }
      this.loadProduct = true
      let totalPage =
        parseInt(this.proTotal / 20) + (Number(this.proTotal) % 20 > 0 ? 1 : 0)
      if (this.productQueryParams.pageNum + 1 <= totalPage) {
        this.productQueryParams.pageNum = this.productQueryParams.pageNum + 1
        listProduct(this.productQueryParams).then((res) => {
          this.productList = this.productList.concat(res.rows)
          this.loadProduct = false
        })
      }
    },
} 
}
</script>