index.vue

<template>
    <div>
        <span v-for="(btn, index) of basicBtns" :key="btn.label">
            <PopconfirmDelete
                :url="getDelUrl(btn.url, row)"
                v-if="btn.type === 'del'"
                :cb="btn.after"
                :title="btn.title"
            />
            <a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
            <a-divider type="vertical" v-if="moreBtns.length || index !== basicBtns.length - 1" />
        </span>

        <template v-if="moreBtns.length">
            <a-popover>
                <template slot="content">
                    <a-space direction="vertical">
                        <a v-for="btn of moreBtns" :key="btn.label" @click="() => btn.click(row)">
                            {{ btn.label }}
                        </a>
                    </a-space>
                </template>
                <a>...</a>
            </a-popover>
        </template>
    </div>
</template>

<script>
import { isFunction } from '@/utils';
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';

export default {
    components: { PopconfirmDelete },

    props: {
        buttons: {
            type: Array,
            default: () => [],
        },
        row: Object,
    },
    computed: {
        basicBtns() {
            return this.buttons.length > 3 ? this.buttons.slice(0, 3) : this.buttons;
        },
        moreBtns() {
            return this.buttons.length > 3 ? this.buttons.slice(3) : [];
        },
    },

    methods: {
        getDelUrl(url, row) {
            if (isFunction(url)) return url(row);
            return url;
        },
    },
};
</script>