el-select根据后台返回的状态码显示对应的文字
时间: 2023-12-12 07:53:22 浏览: 99
可以通过 `el-select` 的 `filterable` 属性和 `remote` 方法来实现根据后台返回的状态码显示对应的文字。
首先,设置 `el-select` 的 `filterable` 属性为 `true`,这样就可以在下拉列表中进行搜索。
其次,设置 `el-select` 的 `remote` 方法,当用户在搜索框中输入关键字时,会触发 `remote` 方法,并将搜索关键字作为参数传递给该方法。在 `remote` 方法中,可以使用 `axios` 或其他库将关键字发送到后台进行搜索,并根据返回的状态码显示对应的文字。
以下是一个示例代码:
```html
<el-select v-model="value" filterable remote :remote-method="search">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
```
```javascript
export default {
data() {
return {
value: '',
options: []
}
},
methods: {
search(query) {
axios.get('/api/search', { params: { q: query } }).then(res => {
if (res.data.code === 200) {
this.options = res.data.data.map(item => ({
label: item.name,
value: item.id
}))
} else {
this.$message.error(res.data.message)
}
}).catch(err => {
this.$message.error('网络错误,请稍后重试')
})
}
}
}
```
在上面的示例代码中,`search` 方法中使用 `axios` 发送搜索请求,并在请求成功后根据返回的状态码判断是否显示错误信息。如果状态码为 `200`,则将搜索结果转换成 `el-option` 组件需要的格式,并赋值给 `options` 属性。如果状态码不为 `200`,则显示错误信息。
阅读全文