element-ui菜单导航的三种递归写法（三）

使用渲染函数把树组件渲染出来。

<script>
import { mapMutations } from "vuex";
import PubSub from "pubsub-js";
export default {
	name: "deepmenu",
	props: ["menu"],

	methods: {
		...mapMutations("process", ["ADD_PROCESS"]),
		toView(e) {
			if (e != this.$route.path) {
				this.$router.push(e);
				// PubSub.publish("addProcess", e);
			}
		},
	},

	render() {
		const fn = (list) => {
			return list.map((e) => {
				let html = null;

				if (e.children.length > 0) {
					html = (
						<el-submenu index={String(e.id)} key={e.id}>
							<template slot="title">
								<i class={e.icon}></i>
								<span slot="title">{e.menu_name}</span>
							</template>
							{fn(e.children)}
						</el-submenu>
					);
				} else {
					html = (
						<el-menu-item index={e.route} key={e.route}>
							<i class={e.icon}></i>
							<span slot="title">{e.menu_name}</span>
						</el-menu-item>
					);
				}

				return html;
			});
		};

		let el = fn(this.menu);

		return (
			<el-menu default-active={this.$route.path} on-select={this.toView}>
				{el}
			</el-menu>
		);
	},
};
</script>