当前位置：首页 > article >正文

element plus的el-select分页

article 2024/10/20 3:22:06

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

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
}