antd-vue下拉框select搜索添加分页功能
直接上代码,其他功能可以自己加
<template>
<a-select
v-model="value"
:placeholder="placeholder"
:allow-clear="true"
@change="chooseOption"
class="width195"
showSearch
:filter-option="false"
@search="handleSearch"
>
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0" />
<div class="footer">
<div @mousedown="e => e.preventDefault()" @click="changePage(0)" style="cursor:pointer">
上一页
</div>
<a-spin :spinning="spinning" class="my-spin" @mousedown="e => e.preventDefault()"/>
<div v-if="total && pageSize && page">{{ nowPage }}/{{ maxPage }}</div>
<div @mousedown="e => e.preventDefault()" @click="changePage(1)" style="cursor:pointer">
下一页
</div>
</div>
</div>
<a-select-option v-for="(item, index) in selectList" :key="index" :value="item[valueKey]"
>{{ item[labelKey] }}
</a-select-option>
</a-select>
</template>
<script>
export default {
name: 'selectPage',
props: {
// 下拉框总数据
list: {
type: Array,
require: true
},
total: {
type: Number,
require: true
},
page: {
type: Number,
require: true
},
pageSize: {
type: Number
},
// 提示
placeholder: {
type: String,
default: '请选择'
},
// 下拉框显示值
labelKey: {
type: String
},
// 下拉框value
valueKey: {
type: String
},
spinning: {
type: Boolean,
default: false
}
// 默认值
// value: {
// type: String
// }
},
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes
}
},
data() {
return {
value: undefined
}
},
computed: {
selectList() {
return this.list
},
maxPage() {
return Math.ceil(this.total / this.pageSize)
},
nowPage() {
return this.page
}
},
methods: {
// 清空数据
clearValue() {
this.value = ''
},
// 换页事件，0切换到上一页，1切换到下一页
changePage(status) {
this.$emit('changePage', status)
},
// 选择下拉框时进行父传子
chooseOption(value) {
this.$emit('change', value)
},
handleSearch(value) {
this.$emit('handleSearch', value)
}
}
}
</script>
<style scoped lang="less">
.footer {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 5px 10px;
.my-spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
使用:
<selectPage
:list="weekList.records"
labelKey="weekValue"
valueKey="weekKey"
@change="selectTimeZone"
@changePage="selectTimeZonePage"
:pageSize="weekList.size"
:page="weekList.current"
:total="weekList.total"
:spinning="spinning"
@handleSearch="handleSearch"
>
</selectPage>