后端查询出tree所需的数据；

tree组件：

前端data中定义

接口返回遍历对象：

遍历两次：取到后台存入的 “checkedkeys” 值。

.push到定义的数组中。

请看elementui的官网是这样定义 checkedkeys 的：

 

注意：:default-checked-keys里面的值要和tree的id值相对应，还有tree组件中的  node-key="id"  也要和后台传过来的id相匹配。

 

使用 :render-content="renderContent" 自定义显示字段;

renderContent(h, { node, data, store }) {
			return (
			<div class="column-container">
				<span style="text-algin:center;margin-right:80px;">{data.name}</span>
				<span style="text-algin:center;margin-right:80px;">
					<el-tag type={data.type === 0?'':data.type === 1?'success':'info'} size="small">
						{data.type === 0?'目录':data.type === 1?'菜单':'按钮'}
					</el-tag>
				</span>
				<span style="text-algin:center;margin-right:80px;"> <i class={data.icon}></i></span>
				<span style="text-algin:center;margin-right:80px;">{data.parentName?data.parentName:'顶级菜单'}</span>
				<span style="text-algin:center;margin-right:80px;">{data.url?data.url:'\t'}</span>
			</div>);
      	},

 

 

 

 

 

 

 

 

 

 

 

 

 

 

世事无常，每天都会有不一样的惊喜等着你哦。