vue侧边栏_vue侧边菜单栏导航-CSDN博客

本文链接：https://blog.csdn.net/2301_78133614/article/details/141603414
在Vue中创建一个侧边栏（Sidebar）是一个常见的需求，特别是在构建管理界面或需要导航菜单的应用时。侧边栏通常用于展示应用的导航链接或菜单项，用户可以通过点击这些链接来访问应用的不同部分。
<template>
	<el-tree :data="data" :props="defaultProps" class="node-name" @node-click="handleNodeClick" >
		<template v-slot="{ node, data }">
      <span>
        <img :src="getIconSrc(data)" style="width: 16px; height: 16px; margin-right: 8px;" >
        {{ node.label }}
      </span>
		</template>
	</el-tree>
</template>

<script >
export default {
	data() {
		return {
			data: [{
				label: '美团',
				iconSrc: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjc4MzQ0MzY0ODUyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEyOTIzIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTkyMiA5MTAuNUgxMDJjLTIxLjkgMC0zOS42LTE3LjctMzkuNi0zOS42VjIyNC4zYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDgyMGMyMS45IDAgMzkuNiAxNy43IDM5LjYgMzkuNnY2NDYuNmMwIDIxLjgtMTcuOCAzOS42LTM5LjYgMzkuNnoiIGZpbGw9IiNGRkEwMDAiIHAtaWQ9IjEyOTI0Ij48L3BhdGg+PHBhdGggZD0iTTUxMiAzNTQuOUg2Mi40VjE1My4xYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDMwNy43YzE3LjUgMCAzMi45IDExLjQgMzcuOSAyOC4yTDUxMiAzNTQuOXoiIGZpbGw9IiNGRkEwMDAiIHAtaWQ9IjEyOTI1Ij48L3BhdGg+PHBhdGggZD0iTTg1OS43IDg2MS4zSDE2NC4zYy0yMS45IDAtMzkuNi0xNy43LTM5LjYtMzkuNnYtNTM3YzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDY5NS41YzIxLjkgMCAzOS42IDE3LjcgMzkuNiAzOS42djUzN2MwIDIxLjgtMTcuOCAzOS42LTM5LjcgMzkuNnoiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9IjEyOTI2Ij48L3BhdGg+PHBhdGggZD0iTTkyMiA5MTAuNUgxMDJjLTIxLjkgMC0zOS42LTE3LjctMzkuNi0zOS42VjM1OS4xYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDgyMGMyMS45IDAgMzkuNiAxNy43IDM5LjYgMzkuNnY1MTEuOGMwIDIxLjgtMTcuOCAzOS42LTM5LjYgMzkuNnoiIGZpbGw9IiNGRkNBMjgiIHAtaWQ9IjEyOTI3Ij48L3BhdGg+PHBhdGggZD0iTTg1Mi44IDMxOS41TDYxMi40IDczOC44bC0yMDkuOC0yNzlMMTQ3IDQ3MS4zbDk3LjUgMTMwLjEtOTcuNSA0LjQgMjI4LjIgMzA0LjZIOTIyYzIxLjkgMCAzOS42LTE3LjcgMzkuNi0zOS42VjQ2My4zTDg1Mi44IDMxOS41eiIgZmlsbD0iI0ZGQjgwNiIgcC1pZD0iMTI5MjgiPjwvcGF0aD48cGF0aCBkPSJNMzgyLjggNDgzLjFIMTY1LjFjLTEwLjkgMC0xOS44LTguOS0xOS44LTE5LjhzOC45LTE5LjggMTkuOC0xOS44aDIxNy43YzEwLjkgMCAxOS44IDguOSAxOS44IDE5LjhzLTguOSAxOS44LTE5LjggMTkuOHpNMzgyLjggNjE3LjZIMTY1LjFjLTEwLjkgMC0xOS44LTguOS0xOS44LTE5LjhzOC45LTE5LjggMTkuOC0xOS44aDIxNy43YzEwLjkgMCAxOS44IDguOSAxOS44IDE5LjggMCAxMS04LjkgMTkuOC0xOS44IDE5Ljh6IiBmaWxsPSIjRkZGOEUxIiBwLWlkPSIxMjkyOSI+PC9wYXRoPjxwYXRoIGQ9Ik04MzcuNCA3NjIuOWwtMTA3LTcwLjdjLTMuMy0yLjItNy42LTIuMi0xMC45IDBsLTEwNyA3MC43Yy02LjYgNC40LTE1LjQtMC40LTE1LjQtOC4zVjMxOC4xYzAtMTAuOSA4LjUtMTkuOCAxOC45LTE5LjhoMjE3LjhjMTAuNCAwIDE4LjkgOC45IDE4LjkgMTkuOHY0MzYuNWMwLjEgNy45LTguNyAxMi43LTE1LjMgOC4zeiIgZmlsbD0iI0Y0NDMzNiIgcC1pZD0iMTI5MzAiPjwvcGF0aD48L3N2Zz4=', // 图片路径
				children: [{
					label: '1',
					iconSrc: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjc4MzQ1NDcyMDkzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzMzM2IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTk3MC42NjY2NjcgMjEzLjMzMzMzM0g1NDYuNTg2NjY3YTEwLjU3MzMzMyAxMC41NzMzMzMgMCAwIDEtNy41NC0zLjEyNjY2Nkw0MjkuNzkzMzMzIDEwMC45NTMzMzNBNTIuOTg2NjY3IDUyLjk4NjY2NyAwIDAgMCAzOTIuMDggODUuMzMzMzMzSDk2YTUzLjM5MzMzMyA1My4zOTMzMzMgMCAwIDAtNTMuMzMzMzMzIDUzLjMzMzMzNHY3MDRhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMgNTMuMzMzMzMzaDg3NC42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMtNTMuMzMzMzMzVjI2Ni42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMC01My4zMzMzMzMtNTMuMzMzMzM0eiBtMTAuNjY2NjY2IDYyOS4zMzMzMzRhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMS0xMC42NjY2NjYgMTAuNjY2NjY2SDk2YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEtMTAuNjY2NjY3LTEwLjY2NjY2NlYxMzguNjY2NjY3YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEgMTAuNjY2NjY3LTEwLjY2NjY2N2gyOTYuMDhhMTAuNTczMzMzIDEwLjU3MzMzMyAwIDAgMSA3LjU0IDMuMTI2NjY3bDEwOS4yNTMzMzMgMTA5LjI1MzMzM0E1Mi45ODY2NjcgNTIuOTg2NjY3IDAgMCAwIDU0Ni41ODY2NjcgMjU2SDk3MC42NjY2NjdhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMSAxMC42NjY2NjYgMTAuNjY2NjY3eiBtLTI5OC42NjY2NjYtMzA5LjMzMzMzNGEyMS4zMzMzMzMgMjEuMzMzMzMzIDAgMCAxLTIxLjMzMzMzNCAyMS4zMzMzMzRINTU0LjY2NjY2N3YxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEtNDIuNjY2NjY3IDBWNTU0LjY2NjY2N0g0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMC00Mi42NjY2NjdoMTA2LjY2NjY2N1Y0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgNDIuNjY2NjY3IDB2MTA2LjY2NjY2N2gxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMjEuMzMzMzM0IDIxLjMzMzMzM3oiIGZpbGw9IiM1QzVDNjYiIHAtaWQ9IjEzMzM3Ij48L3BhdGg+PC9zdmc+', // 图片路径
				}]
			}, {
				label: '闲鱼',
				iconSrc: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjc4MzQ0MzY0ODUyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEyOTIzIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTkyMiA5MTAuNUgxMDJjLTIxLjkgMC0zOS42LTE3LjctMzkuNi0zOS42VjIyNC4zYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDgyMGMyMS45IDAgMzkuNiAxNy43IDM5LjYgMzkuNnY2NDYuNmMwIDIxLjgtMTcuOCAzOS42LTM5LjYgMzkuNnoiIGZpbGw9IiNGRkEwMDAiIHAtaWQ9IjEyOTI0Ij48L3BhdGg+PHBhdGggZD0iTTUxMiAzNTQuOUg2Mi40VjE1My4xYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDMwNy43YzE3LjUgMCAzMi45IDExLjQgMzcuOSAyOC4yTDUxMiAzNTQuOXoiIGZpbGw9IiNGRkEwMDAiIHAtaWQ9IjEyOTI1Ij48L3BhdGg+PHBhdGggZD0iTTg1OS43IDg2MS4zSDE2NC4zYy0yMS45IDAtMzkuNi0xNy43LTM5LjYtMzkuNnYtNTM3YzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDY5NS41YzIxLjkgMCAzOS42IDE3LjcgMzkuNiAzOS42djUzN2MwIDIxLjgtMTcuOCAzOS42LTM5LjcgMzkuNnoiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9IjEyOTI2Ij48L3BhdGg+PHBhdGggZD0iTTkyMiA5MTAuNUgxMDJjLTIxLjkgMC0zOS42LTE3LjctMzkuNi0zOS42VjM1OS4xYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDgyMGMyMS45IDAgMzkuNiAxNy43IDM5LjYgMzkuNnY1MTEuOGMwIDIxLjgtMTcuOCAzOS42LTM5LjYgMzkuNnoiIGZpbGw9IiNGRkNBMjgiIHAtaWQ9IjEyOTI3Ij48L3BhdGg+PHBhdGggZD0iTTg1Mi44IDMxOS41TDYxMi40IDczOC44bC0yMDkuOC0yNzlMMTQ3IDQ3MS4zbDk3LjUgMTMwLjEtOTcuNSA0LjQgMjI4LjIgMzA0LjZIOTIyYzIxLjkgMCAzOS42LTE3LjcgMzkuNi0zOS42VjQ2My4zTDg1Mi44IDMxOS41eiIgZmlsbD0iI0ZGQjgwNiIgcC1pZD0iMTI5MjgiPjwvcGF0aD48cGF0aCBkPSJNMzgyLjggNDgzLjFIMTY1LjFjLTEwLjkgMC0xOS44LTguOS0xOS44LTE5LjhzOC45LTE5LjggMTkuOC0xOS44aDIxNy43YzEwLjkgMCAxOS44IDguOSAxOS44IDE5LjhzLTguOSAxOS44LTE5LjggMTkuOHpNMzgyLjggNjE3LjZIMTY1LjFjLTEwLjkgMC0xOS44LTguOS0xOS44LTE5LjhzOC45LTE5LjggMTkuOC0xOS44aDIxNy43YzEwLjkgMCAxOS44IDguOSAxOS44IDE5LjggMCAxMS04LjkgMTkuOC0xOS44IDE5Ljh6IiBmaWxsPSIjRkZGOEUxIiBwLWlkPSIxMjkyOSI+PC9wYXRoPjxwYXRoIGQ9Ik04MzcuNCA3NjIuOWwtMTA3LTcwLjdjLTMuMy0yLjItNy42LTIuMi0xMC45IDBsLTEwNyA3MC43Yy02LjYgNC40LTE1LjQtMC40LTE1LjQtOC4zVjMxOC4xYzAtMTAuOSA4LjUtMTkuOCAxOC45LTE5LjhoMjE3LjhjMTAuNCAwIDE4LjkgOC45IDE4LjkgMTkuOHY0MzYuNWMwLjEgNy45LTguNyAxMi43LTE1LjMgOC4zeiIgZmlsbD0iI0Y0NDMzNiIgcC1pZD0iMTI5MzAiPjwvcGF0aD48L3N2Zz4=', // 图片路径
				children: [{
					label: '1',
					iconSrc: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjc4MzQ1NDcyMDkzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzMzM2IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTk3MC42NjY2NjcgMjEzLjMzMzMzM0g1NDYuNTg2NjY3YTEwLjU3MzMzMyAxMC41NzMzMzMgMCAwIDEtNy41NC0zLjEyNjY2Nkw0MjkuNzkzMzMzIDEwMC45NTMzMzNBNTIuOTg2NjY3IDUyLjk4NjY2NyAwIDAgMCAzOTIuMDggODUuMzMzMzMzSDk2YTUzLjM5MzMzMyA1My4zOTMzMzMgMCAwIDAtNTMuMzMzMzMzIDUzLjMzMzMzNHY3MDRhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMgNTMuMzMzMzMzaDg3NC42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMtNTMuMzMzMzMzVjI2Ni42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMC01My4zMzMzMzMtNTMuMzMzMzM0eiBtMTAuNjY2NjY2IDYyOS4zMzMzMzRhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMS0xMC42NjY2NjYgMTAuNjY2NjY2SDk2YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEtMTAuNjY2NjY3LTEwLjY2NjY2NlYxMzguNjY2NjY3YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEgMTAuNjY2NjY3LTEwLjY2NjY2N2gyOTYuMDhhMTAuNTczMzMzIDEwLjU3MzMzMyAwIDAgMSA3LjU0IDMuMTI2NjY3bDEwOS4yNTMzMzMgMTA5LjI1MzMzM0E1Mi45ODY2NjcgNTIuOTg2NjY3IDAgMCAwIDU0Ni41ODY2NjcgMjU2SDk3MC42NjY2NjdhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMSAxMC42NjY2NjYgMTAuNjY2NjY3eiBtLTI5OC42NjY2NjYtMzA5LjMzMzMzNGEyMS4zMzMzMzMgMjEuMzMzMzMzIDAgMCAxLTIxLjMzMzMzNCAyMS4zMzMzMzRINTU0LjY2NjY2N3YxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEtNDIuNjY2NjY3IDBWNTU0LjY2NjY2N0g0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMC00Mi42NjY2NjdoMTA2LjY2NjY2N1Y0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgNDIuNjY2NjY3IDB2MTA2LjY2NjY2N2gxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMjEuMzMzMzM0IDIxLjMzMzMzM3oiIGZpbGw9IiM1QzVDNjYiIHAtaWQ9IjEzMzM3Ij48L3BhdGg+PC9zdmc+', // 图片路径
				}, {
					label: '2',
					iconSrc: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjc4MzQ1NDcyMDkzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzMzM2IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTk3MC42NjY2NjcgMjEzLjMzMzMzM0g1NDYuNTg2NjY3YTEwLjU3MzMzMyAxMC41NzMzMzMgMCAwIDEtNy41NC0zLjEyNjY2Nkw0MjkuNzkzMzMzIDEwMC45NTMzMzNBNTIuOTg2NjY3IDUyLjk4NjY2NyAwIDAgMCAzOTIuMDggODUuMzMzMzMzSDk2YTUzLjM5MzMzMyA1My4zOTMzMzMgMCAwIDAtNTMuMzMzMzMzIDUzLjMzMzMzNHY3MDRhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMgNTMuMzMzMzMzaDg3NC42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMtNTMuMzMzMzMzVjI2Ni42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMC01My4zMzMzMzMtNTMuMzMzMzM0eiBtMTAuNjY2NjY2IDYyOS4zMzMzMzRhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMS0xMC42NjY2NjYgMTAuNjY2NjY2SDk2YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEtMTAuNjY2NjY3LTEwLjY2NjY2NlYxMzguNjY2NjY3YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEgMTAuNjY2NjY3LTEwLjY2NjY2N2gyOTYuMDhhMTAuNTczMzMzIDEwLjU3MzMzMyAwIDAgMSA3LjU0IDMuMTI2NjY3bDEwOS4yNTMzMzMgMTA5LjI1MzMzM0E1Mi45ODY2NjcgNTIuOTg2NjY3IDAgMCAwIDU0Ni41ODY2NjcgMjU2SDk3MC42NjY2NjdhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMSAxMC42NjY2NjYgMTAuNjY2NjY3eiBtLTI5OC42NjY2NjYtMzA5LjMzMzMzNGEyMS4zMzMzMzMgMjEuMzMzMzMzIDAgMCAxLTIxLjMzMzMzNCAyMS4zMzMzMzRINTU0LjY2NjY2N3YxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEtNDIuNjY2NjY3IDBWNTU0LjY2NjY2N0g0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMC00Mi42NjY2NjdoMTA2LjY2NjY2N1Y0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgNDIuNjY2NjY3IDB2MTA2LjY2NjY2N2gxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMjEuMzMzMzM0IDIxLjMzMzMzM3oiIGZpbGw9IiM1QzVDNjYiIHAtaWQ9IjEzMzM3Ij48L3BhdGg+PC9zdmc+', // 图片路径

				}]
			}, {
				label: '抖音素材',
				iconSrc: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjc4MzQ0MzY0ODUyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEyOTIzIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTkyMiA5MTAuNUgxMDJjLTIxLjkgMC0zOS42LTE3LjctMzkuNi0zOS42VjIyNC4zYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDgyMGMyMS45IDAgMzkuNiAxNy43IDM5LjYgMzkuNnY2NDYuNmMwIDIxLjgtMTcuOCAzOS42LTM5LjYgMzkuNnoiIGZpbGw9IiNGRkEwMDAiIHAtaWQ9IjEyOTI0Ij48L3BhdGg+PHBhdGggZD0iTTUxMiAzNTQuOUg2Mi40VjE1My4xYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDMwNy43YzE3LjUgMCAzMi45IDExLjQgMzcuOSAyOC4yTDUxMiAzNTQuOXoiIGZpbGw9IiNGRkEwMDAiIHAtaWQ9IjEyOTI1Ij48L3BhdGg+PHBhdGggZD0iTTg1OS43IDg2MS4zSDE2NC4zYy0yMS45IDAtMzkuNi0xNy43LTM5LjYtMzkuNnYtNTM3YzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDY5NS41YzIxLjkgMCAzOS42IDE3LjcgMzkuNiAzOS42djUzN2MwIDIxLjgtMTcuOCAzOS42LTM5LjcgMzkuNnoiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9IjEyOTI2Ij48L3BhdGg+PHBhdGggZD0iTTkyMiA5MTAuNUgxMDJjLTIxLjkgMC0zOS42LTE3LjctMzkuNi0zOS42VjM1OS4xYzAtMjEuOSAxNy43LTM5LjYgMzkuNi0zOS42aDgyMGMyMS45IDAgMzkuNiAxNy43IDM5LjYgMzkuNnY1MTEuOGMwIDIxLjgtMTcuOCAzOS42LTM5LjYgMzkuNnoiIGZpbGw9IiNGRkNBMjgiIHAtaWQ9IjEyOTI3Ij48L3BhdGg+PHBhdGggZD0iTTg1Mi44IDMxOS41TDYxMi40IDczOC44bC0yMDkuOC0yNzlMMTQ3IDQ3MS4zbDk3LjUgMTMwLjEtOTcuNSA0LjQgMjI4LjIgMzA0LjZIOTIyYzIxLjkgMCAzOS42LTE3LjcgMzkuNi0zOS42VjQ2My4zTDg1Mi44IDMxOS41eiIgZmlsbD0iI0ZGQjgwNiIgcC1pZD0iMTI5MjgiPjwvcGF0aD48cGF0aCBkPSJNMzgyLjggNDgzLjFIMTY1LjFjLTEwLjkgMC0xOS44LTguOS0xOS44LTE5LjhzOC45LTE5LjggMTkuOC0xOS44aDIxNy43YzEwLjkgMCAxOS44IDguOSAxOS44IDE5LjhzLTguOSAxOS44LTE5LjggMTkuOHpNMzgyLjggNjE3LjZIMTY1LjFjLTEwLjkgMC0xOS44LTguOS0xOS44LTE5LjhzOC45LTE5LjggMTkuOC0xOS44aDIxNy43YzEwLjkgMCAxOS44IDguOSAxOS44IDE5LjggMCAxMS04LjkgMTkuOC0xOS44IDE5Ljh6IiBmaWxsPSIjRkZGOEUxIiBwLWlkPSIxMjkyOSI+PC9wYXRoPjxwYXRoIGQ9Ik04MzcuNCA3NjIuOWwtMTA3LTcwLjdjLTMuMy0yLjItNy42LTIuMi0xMC45IDBsLTEwNyA3MC43Yy02LjYgNC40LTE1LjQtMC40LTE1LjQtOC4zVjMxOC4xYzAtMTAuOSA4LjUtMTkuOCAxOC45LTE5LjhoMjE3LjhjMTAuNCAwIDE4LjkgOC45IDE4LjkgMTkuOHY0MzYuNWMwLjEgNy45LTguNyAxMi43LTE1LjMgOC4zeiIgZmlsbD0iI0Y0NDMzNiIgcC1pZD0iMTI5MzAiPjwvcGF0aD48L3N2Zz4=', // 图片路径
				children: [{
					label: '1',
					iconSrc: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjc4MzQ1NDcyMDkzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzMzM2IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTk3MC42NjY2NjcgMjEzLjMzMzMzM0g1NDYuNTg2NjY3YTEwLjU3MzMzMyAxMC41NzMzMzMgMCAwIDEtNy41NC0zLjEyNjY2Nkw0MjkuNzkzMzMzIDEwMC45NTMzMzNBNTIuOTg2NjY3IDUyLjk4NjY2NyAwIDAgMCAzOTIuMDggODUuMzMzMzMzSDk2YTUzLjM5MzMzMyA1My4zOTMzMzMgMCAwIDAtNTMuMzMzMzMzIDUzLjMzMzMzNHY3MDRhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMgNTMuMzMzMzMzaDg3NC42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMtNTMuMzMzMzMzVjI2Ni42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMC01My4zMzMzMzMtNTMuMzMzMzM0eiBtMTAuNjY2NjY2IDYyOS4zMzMzMzRhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMS0xMC42NjY2NjYgMTAuNjY2NjY2SDk2YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEtMTAuNjY2NjY3LTEwLjY2NjY2NlYxMzguNjY2NjY3YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEgMTAuNjY2NjY3LTEwLjY2NjY2N2gyOTYuMDhhMTAuNTczMzMzIDEwLjU3MzMzMyAwIDAgMSA3LjU0IDMuMTI2NjY3bDEwOS4yNTMzMzMgMTA5LjI1MzMzM0E1Mi45ODY2NjcgNTIuOTg2NjY3IDAgMCAwIDU0Ni41ODY2NjcgMjU2SDk3MC42NjY2NjdhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMSAxMC42NjY2NjYgMTAuNjY2NjY3eiBtLTI5OC42NjY2NjYtMzA5LjMzMzMzNGEyMS4zMzMzMzMgMjEuMzMzMzMzIDAgMCAxLTIxLjMzMzMzNCAyMS4zMzMzMzRINTU0LjY2NjY2N3YxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEtNDIuNjY2NjY3IDBWNTU0LjY2NjY2N0g0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMC00Mi42NjY2NjdoMTA2LjY2NjY2N1Y0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgNDIuNjY2NjY3IDB2MTA2LjY2NjY2N2gxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMjEuMzMzMzM0IDIxLjMzMzMzM3oiIGZpbGw9IiM1QzVDNjYiIHAtaWQ9IjEzMzM3Ij48L3BhdGg+PC9zdmc+', // 图片路径

				}, {
					label: '2',
					iconSrc: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjc4MzQ1NDcyMDkzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzMzM2IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTk3MC42NjY2NjcgMjEzLjMzMzMzM0g1NDYuNTg2NjY3YTEwLjU3MzMzMyAxMC41NzMzMzMgMCAwIDEtNy41NC0zLjEyNjY2Nkw0MjkuNzkzMzMzIDEwMC45NTMzMzNBNTIuOTg2NjY3IDUyLjk4NjY2NyAwIDAgMCAzOTIuMDggODUuMzMzMzMzSDk2YTUzLjM5MzMzMyA1My4zOTMzMzMgMCAwIDAtNTMuMzMzMzMzIDUzLjMzMzMzNHY3MDRhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMgNTMuMzMzMzMzaDg3NC42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMCA1My4zMzMzMzMtNTMuMzMzMzMzVjI2Ni42NjY2NjdhNTMuMzkzMzMzIDUzLjM5MzMzMyAwIDAgMC01My4zMzMzMzMtNTMuMzMzMzM0eiBtMTAuNjY2NjY2IDYyOS4zMzMzMzRhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMS0xMC42NjY2NjYgMTAuNjY2NjY2SDk2YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEtMTAuNjY2NjY3LTEwLjY2NjY2NlYxMzguNjY2NjY3YTEwLjY2NjY2NyAxMC42NjY2NjcgMCAwIDEgMTAuNjY2NjY3LTEwLjY2NjY2N2gyOTYuMDhhMTAuNTczMzMzIDEwLjU3MzMzMyAwIDAgMSA3LjU0IDMuMTI2NjY3bDEwOS4yNTMzMzMgMTA5LjI1MzMzM0E1Mi45ODY2NjcgNTIuOTg2NjY3IDAgMCAwIDU0Ni41ODY2NjcgMjU2SDk3MC42NjY2NjdhMTAuNjY2NjY3IDEwLjY2NjY2NyAwIDAgMSAxMC42NjY2NjYgMTAuNjY2NjY3eiBtLTI5OC42NjY2NjYtMzA5LjMzMzMzNGEyMS4zMzMzMzMgMjEuMzMzMzMzIDAgMCAxLTIxLjMzMzMzNCAyMS4zMzMzMzRINTU0LjY2NjY2N3YxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEtNDIuNjY2NjY3IDBWNTU0LjY2NjY2N0g0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMC00Mi42NjY2NjdoMTA2LjY2NjY2N1Y0MDUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgNDIuNjY2NjY3IDB2MTA2LjY2NjY2N2gxMDYuNjY2NjY2YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEgMjEuMzMzMzM0IDIxLjMzMzMzM3oiIGZpbGw9IiM1QzVDNjYiIHAtaWQ9IjEzMzM3Ij48L3BhdGg+PC9zdmc+', // 图片路径

				}]
			}],
			defaultProps: {
				children: 'children',
				label: 'label'
			}
		};
	},
	methods:{
		handleNodeClick(data) {
			console.log(data);
		},
		getIconSrc(node){
			return node.iconSrc ? node.iconSrc : ''; // 返回节点自定义的图片路径，如果没有则返回空字符串
		}
	}
};
</script>

<style scoped lang="scss">
.mg-member-tree .custom-tree-node .node-name {
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>