ruoyi-vue-pro 列表增加更多操作

在开发中，列表中“操作”列会有各种各样的操作，但有时候太多了显示不下，这时候，可以增加一个“更多”下拉菜单，来展示其他的操作。

1、更改操作列

<el-table-column label="操作" align="center" width="150px">
    <template #default="scope">
        <div class="flex items-center justify-center">
            <el-button
                    link
                    type="primary"
                    @click="openFormSee('preview', scope.row.id)"
            >
                详情
            </el-button>
            <el-dropdown
                    @command="(command) => handleCommand(command, scope.row)"
                    v-hasPermi="[
                                'system:employees-rep:delete',
                                'system:employees-rep:update'
                            ]"
            >
                <el-button type="primary" link
                ><Icon icon="ep:d-arrow-right" /> 更多</el-button
                >
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item
                                command="handleUpdate"
                                v-show="scope.row.workflowStatus !== 'PROCESSING'"
                                v-if="checkPermi(['system:employees-rep:update'])"
                        >
                            <Icon icon="ep:edit" />编辑
                        </el-dropdown-item>

                        <el-dropdown-item
                                command="handleApply"
                                v-show="scope.row.workflowStatus == 'DRAFT'"
                                v-if="checkPermi(['system:employees-rep:update'])"
                        >
                            <Icon icon="ep:tickets" />申请
                        </el-dropdown-item>

                        <el-dropdown-item
                                command="handleAudit"
                                v-show="
                                            scope.row.workflowStatus &&
                                            scope.row.workflowStatus !== 'DRAFT'
                                        "
                                v-if="checkPermi(['system:employees-rep:update'])"
                        >
                            <Icon icon="ep:finished" />审核
                        </el-dropdown-item>

                        <el-dropdown-item
                                command="handleDelete"
                                v-show="scope.row.workflowStatus == 'DRAFT'"
                                v-if="
                                            checkPermi([
                                                'system:employee-pre-job-training-rep:delete'
                                            ])
                                        "
                        >
                            <Icon icon="ep:delete" />删除
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </template>
</el-table-column>

2、引入权限验证模块

import { checkPermi } from '@/utils/permission'

3、设置各操作按钮方法

/** 操作分发 */
const handleCommand = (command: string, row: EmployeesRepVO) => {
    switch (command) {
        case 'handleDelete':
            handleDelete(row.id)
            break
        case 'handleUpdate':
            openForm('update', row.id)
            break
        case 'handleApply':
            openFormApply('audit', row.id)
            break
        case 'handleAudit':
            openTask(row)
            break
        default:
            break
    }
}