el-select选择器远程搜索有禁用项

it2023-01-07  59

根据要求用到select远程搜索功能,并且如果已经添加过得,禁止添加。

结果显示为:

 

前端页面代码为:

<el-form-item label="SKU名称" prop="skuId">           <el-select v-model="formData.skuId" filterable remote placeholder="请输入关键词" clearable :remote-method="remoteMethod" :loading="loading" >             <el-option               v-for="(item, index) in skuData"               :key="index"               :label="item.spgg"               :value="item.id"               :disabled="item.disabled"             >             </el-option>           </el-select>         </el-form-item>

这里的 item.disabled,是我在后台定义的boolean类型disabled

远程搜索methods为:

remoteMethod(query) {       this.skuData = [];       if (query !== "") {         this.loading = true;         setTimeout(() => {           this.loading = false;           const para = {             query: query,             gysid: this.$router.currentRoute.query.id,             pageSize: 50           };           getSupPrdoctList(para).then((res) => {             this.skuData = res.data;           });         }, 200);       } else {         this.skuData = [];       }     },

 

后台代码为:

后台代码做了一个查询判断,这两个数据作比较,如果添加的数据已经存在,那么就把状态改为禁用,否则还在页面显示 

最新回复(0)