~~~ /* * @Author: tongjsh * @LastEditors: tongjsh * @Description: 無限層級Menu * @Date: 2019-02-28 19:15:50 * @LastEditTime: 2019-12-17 10:30:32 */ /* eslint-disable */ // const hasChild = item => item.children && item.children.length !== 0; export default { render() { const { Menu, Submenu, MenuItem, ErsIcon } = this.$options.components; const { returnObjStr, computedName, hasChild } = this; // 渲染item const menuItemDefault = item => { return [ item.icon && <ErsIcon name={item.icon} />, <span class='ers-menu-title' title={item.name}> {item.name} </span>, item.add && ( <ErsIcon name='tianjia' class='menu-add-btn' nativeOnClick={e => this.handleAdd(e, item)} /> ) ]; }; // 遞歸渲染SubMenu const renderSubMenu = item => { return ( <Submenu key={item.name} name={computedName(item)}> <template slot='title'> {this.$scopedSlots.subMenuItem ? this.$scopedSlots.subMenuItem(item) : menuItemDefault(item)} </template> {item.children.map(item => { { if (hasChild(item)) { return renderSubMenu(item); } return ( <MenuItem name={ returnObjStr ? JSON.stringify(item) : computedName(item) } key={item.name} disabled={item.disabled} > {this.$scopedSlots.menuItem ? this.$scopedSlots.menuItem(item) : menuItemDefault(item)} </MenuItem> ); } })} </Submenu> ); }; const renderMenu = data => { return data.map(item => { if (hasChild(item)) { return renderSubMenu(item); } else { return ( <MenuItem name={returnObjStr ? JSON.stringify(item) : computedName(item)} key={item.name} disabled={item.disabled} > {this.$scopedSlots.menuItem ? this.$scopedSlots.menuItem(item) : menuItemDefault(item)} </MenuItem> ); } }); }; return ( <Menu on-on-select={this.selectMenuItem} open-names={this.openNames} active-name={this.activeName} theme={this.theme === "dark" ? "dark" : "light"} width='100%' class={["ers-menu", `ers-menu-${this.theme}`]} ref='menu' > {renderMenu(this.menuData)} </Menu> ); } }; ~~~