基于ant-design-vue的分页Selector

因为要做一个用户分页选择器，今天封装了一个，感觉用起来还挺简单方便的

template部分

<template>
    <a-select v-model="value" :placeholder="placeholder" :allow-clear="true" @change="chooseOption">
        <div slot="dropdownRender" slot-scope="menu">
            <v-nodes :vnodes="menu" />
            <a-divider style="margin: 4px 0;" />
            <div style="padding: 4px 8px; cursor: pointer; float: left;" @mousedown="e => e.preventDefault()"
                @click="changePage(0)" v-show="nowPage">
                上一页
            </div>
            <div style="padding: 4px 8px; cursor: pointer; float: right;" @mousedown="e => e.preventDefault()"
                @click="changePage(1)" v-show="nowPage + 1 !== maxPage">
                下一页
            </div>
        </div>
        <a-select-option v-for="(item, index) in selectList" :key="index" :value="item.id">{{ item.name }}
        </a-select-option>
    </a-select>
</template>

js部分

<script>
export default {
    name: 'userSelector',
    props: {
        list: {
            type: Array,
            require: true
        },
        total: {
            type: Number,
            require: true
        },
        page: {
            type: Number,
            require: true
        },
        placeholder: {
            type: String,
            default: '请选择'
        }
    },
    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 / 10);
        },
        nowPage() {
            return this.page;
        }
    },
    methods: {
        // 清空数据
        clearValue() {
            this.value = '';
        },
        // 换页事件，0切换到上一页，1切换到下一页
        changePage(status) {
            this.$emit('changePage', status);
        },
        // 选择用户时触发
        chooseOption(value) {
            this.$emit('change', value);
        }
    }
};
</script>

当数据量很大，但是又得用select进行选择时用这个还挺好的