el-table嵌套el-dropdown实现动态下拉菜单操作

表格中多个操作整合为下拉菜单形式（elementui）

适用场景：操作个数太多导致表格宽度太大（节省空间）el-table嵌套el-dropdown

一、核心思想

自定义操作列表，包含 value, label, permission, icon, param，使用el-dropdown组件，将组件的指令封装为一个对象，对象中包含操作唯一值，权限等属性

二、参数解释

• value：唯一代表某个操作，相当于id
• label：操作的默认名称
• permission：权限值，有权限控制要求时，该属性用于接收权限编码
• icon：图标
• param：其他参数，用于多个事件绑定一个方法，通过该字段判断执行对应逻辑

三、实操样例

1、html代码

<el-table-column
    label="操作"
    align="center"
    width="150"
    class-name="operate"
>
    <template slot-scope="scope">
        <el-dropdown @command="executeOperate">
            <el-button type="primary">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                    v-for="(item, index) in operateOptions"
                    :key="index"
                    :disabled="havePermission([item.permission])"
                    :icon="item.icon"
                    :command="handleCommand(scope.row, item.value, item.param)"
                >{{ renderLabel(scope.row, item) }}
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
</el-table-column>

2、js自定义数据

operateOptions: [{
    value: '1', // 下拉菜单唯一标识
    label: '查看', // 菜单默认操作名称
    permission: '111', // 菜单权限
    icon: 'el-icon-search', // 菜单图标
    param: 'look' // 其他参数（不同于表格所需的scope.row及value），如无传空
}, {
    value: '2',
    label: '编辑',
    permission: '222',
    icon: 'el-icon-edit',
    param: 'change'
}, {
    value: '3',
    label: '删除',
    permission: '333',
    icon: 'el-icon-document-delete',
    param: ''
}, {
    value: '4',
    label: '开启',
    permission: '444',
    icon: 'el-icon-circle-close',
    param: ''
}, {
    value: '5',
    label: '推送',
    permission: '555',
    icon: 'el-icon-edit-outline',
    param: ''
}],

3、事件逻辑

// 根据唯一值执行对应操作
executeOperate(c) {
    switch (c.command) {
        case '1':
            this.A(c.row, c.param)
            break
        case '2':
            this.A(c.row, c.param)
            break
        case '3':
            this.B(c.row.id)
            break
        case '4':
            this.C(c.row)
            break
        case '5':
            this.D(c.row)
            break
        default :
            return
    }
},
// 将command属性封装成一个对象 便于@command事件可获得多个参数
handleCommand(row, command, param) {
    return {
        row: row,
        command: command,
        param: param
    }
},

4、操作名称自定义

// 默认返回label, 可根据表格属性自定义返回内容（采用闭包传参）
renderLabel: function() {
    return function(row, item) {
        if (item.value === '1') {
            return row.status === 1 ? '开启' : '关闭'
        }
        return item.label
    }
}