element plus的el-select分页

时间:2024-10-18 21:19:18

在这里插入图片描述摘要:

el-select的数据比较多的时候,必须要分页,处理方案有全部数据回来,或者添加搜索功能,但是就有个问题就是编辑的时候回显问题,必须要保证select的数据有对应的id与name匹配回显!

<el-form-item label="品牌" prop="goodsSku.brandId">
   <el-select 
      :remote-method="queryBrandList"
      :loading="loading"
      @change="handleChangeBrandName" 
      v-model="formData.goodsSku.brandId" 
      remote
      filterable 
      placeholder="请选择品牌" 
      clearable 
      class="!w-240px">
         <el-option v-for="item in brandList" :key="item.id" :label="item.brandName" :value="item.id" /></el-select>
</el-form-item>
const loading = ref(false)
queryBrandList(brandName)
const queryBrandList = async (brandName?: string) => {
  loading.value = true
  const { list } = await GoodsBrandApi.getGoodsBrandPage({
    brandName,
    pageNo: 1,
    pageSize: 10
  })
  brandList.value = []
  brandList.value = list
  loading.value = false
}