index.vue

<template>
    <a-table-column :title="title">
        <template #default="row">
            <template v-for="btn of basicBtns">
                <PopconfirmDelete
                    :url="`/api/v1/roles/${row.roleId}`"
                    :cb="refreshTable"
                    :key="btn.label"
                    v-if="btn.type === 'del'"
                />
                <a @click="() => btn?.click(row, btn)" :key="btn.label">{{ btn.label }}</a>
                <a-divider type="vertical" :key="btn.label + 'divider'" />
            </template>
            <template v-if="moreBtns.length">
                <a-popover>
                    <template slot="content">
                        <a v-for="btn of moreBtns" :key="btn.label" @click="() => btn?.click(row, btn)">
                            {{ btn.label }}
                        </a>
                    </template>
                    <a>...</a>
                </a-popover>
            </template>
        </template>
    </a-table-column>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '操作',
        },
        buttons: {
            type: Array,
            default: () => [
                {
                    label: '查看',
                    onClick(row) {},
                    type: 'del',
                },
            ],
        },
    },
    computed: {
        basicBtns() {
            return this.buttons.length > 3 ? this.buttons.slice(0, 3) : this.buttons;
        },
        moreBtns() {
            return this.buttons.length > 3 ? this.buttons.slice(3) : [];
        },
    },
};
</script>