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

直接上效果：

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

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

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

    ...
    
        上午
        上午
        下午
        下午
    

使用 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 文件