Vue ElementUI el-dropdown 添加选中icon效果

直接上效果：

注意 el-dropdown 是动态生成，在开发者工具里可以看到渲染完后的 Dom 其实是 一个 ul ：

注意 el-dropdown-item 中的 group 是自定义属性，用于分组显示。

代码第 5/6 和 7/8 行是有无 icon 的区别，根据 group 属性值做分组显示。

<!--下拉列表  -->
<el-dropdown class="dropdown-btn" @command="onCommand" :hide-on-click="false">
    <span class="el-dropdown-link">...</span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item group="02" v-show="groupId=='02'" command="morning">上午</el-dropdown-item>
        <el-dropdown-item group="01" v-show="groupId=='01'" command="morning" icon="custom-icon el-icon-check" >上午</el-dropdown-item>
        <el-dropdown-item group="01" v-show="groupId=='01'" command="afternoon" >下午</el-dropdown-item>
        <el-dropdown-item group="02" v-show="groupId=='02'" command="afternoon" icon="custom-icon el-icon-check">下午</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

使用 command 指令事件做显示切换：

onCommand(command) {
    // 是否选中上午
    let isMorning = command === 'morning' ? true : false;
    // 当前点击的 下拉菜单 item 对象，注意是 arguments 第二个参数
    let dropItem = arguments[1];
    // 获取菜单的HTML id，其实就是 ul 的 id
    let menuId = dropItem.$parent.$el.id
    // 获取 li 列表
    let menuList = document.getElementById(menuId).getElementsByTagName('li');
    menuList.forEach(li => {
        // group 是自定义属性
        let group = li.getAttribute('group');
        // 是“上午”且group=01，或 是“下午”且group=02 时显示 li
        if((isMorning && group === '01' || (!isMorning && group === '02'))) {
            li.style.display = ''
        }
        else {
            li.style.display = 'none'
        }
    });
}

完整代码，这是一个 vue 文件

<template>
    <div class="dropdown-main">
<!--下拉列表  -->
<el-dropdown class="dropdown-btn" @command="onCommand" :hide-on-click="false">
    <span class="el-dropdown-link">...</span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item group="02" v-show="groupId=='02'" command="morning">上午</el-dropdown-item>
        <el-dropdown-item group="01" v-show="groupId=='01'" command="morning" icon="custom-icon el-icon-check" >上午</el-dropdown-item>
        <el-dropdown-item group="01" v-show="groupId=='01'" command="afternoon" >下午</el-dropdown-item>
        <el-dropdown-item group="02" v-show="groupId=='02'" command="afternoon" icon="custom-icon el-icon-check">下午</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
    </div>
</template>
<script>
export default {
    data() {
        return {
            groupId: '01'
        }
    },
    methods: {
        onCommand(command) {
            // 是否选中上午
            let isMorning = command === 'morning' ? true : false;
            // 当前点击的 下拉菜单 item 对象，注意是 arguments 第二个参数
            let dropItem = arguments[1];
            // 获取菜单的HTML id，其实就是 ul 的 id
            let menuId = dropItem.$parent.$el.id
            // 获取 li 列表
            let menuList = document.getElementById(menuId).getElementsByTagName('li');
            menuList.forEach(li => {
                // group 是自定义属性
                let group = li.getAttribute('group');
                // 是“上午”且group=01，或 是“下午”且group=02 时显示 li
                if((isMorning && group === '01' || (!isMorning && group === '02'))) {
                    li.style.display = ''
                }
                else {
                    li.style.display = 'none'
                }
            });
        }
    }
}
</script>
<style lang="stylus" scoped>
.el-dropdown-link {
    cursor pointer    
}
.dropdown-main {
    padding: 40px;    
}
</style>
<style lang="stylus">
.custom-icon {
    float:right;
    margin-top: 10px;
}
.el-dropdown-menu__item {// 其实就是 li
    width:80px;
    padding: 0 15px;
}
</style>