摘要:
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
}