根据要求用到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 = []; } },
后台代码为:
后台代码做了一个查询判断,这两个数据作比较,如果添加的数据已经存在,那么就把状态改为禁用,否则还在页面显示