封装好的el-select 下拉选项带分页可查询,实现代码
时间: 2023-11-01 10:19:57 浏览: 93
好的,以下是一个简单的实现代码,您可以参考一下:
```vue
<template>
<div>
<el-select v-model="selected" filterable @change="handleSelectChange" remote :remote-method="remoteMethod">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handlePageChange" />
</div>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [],
currentPage: 1,
pageSize: 10,
total: 0
}
},
methods: {
// 远程搜索方法
remoteMethod(query) {
// 发送请求获取对应的数据
axios.get('/api/options', {
params: {
query,
page: this.currentPage,
pageSize: this.pageSize
}
}).then(response => {
const { data, total } = response.data
this.options = data
this.total = total
}).catch(error => {
console.log(error)
})
},
// 选择发生变化
handleSelectChange() {
console.log(this.selected)
},
// 分页发生变化
handlePageChange(current) {
this.currentPage = current
this.remoteMethod('')
}
}
}
</script>
```
在这个代码中,我们使用了 Element UI 中的 el-select 和 el-pagination 组件来实现分页下拉框。我们通过 el-select 的 filterable 属性来开启模糊搜索功能,通过 remote 属性来开启远程搜索功能。我们使用了 axios 发送异步请求来获取后端返回的数据,并将数据渲染到 el-select 中。我们使用 el-pagination 组件来实现分页功能,当用户选择不同的页码时,我们会发送请求获取对应的数据,再将数据渲染到 el-select 中。
阅读全文