vue侧边栏

news2024/9/20 18:42:16

在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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2082429.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

openEuler安装Docker和踩坑分析

我是用的openEuler版本&#xff1a;20.03 LTS SP1&#xff0c;安装在虚拟机中&#xff0c;使用ssh连接 在openEuler上安装Docker还是让我踩了不少坑&#xff0c;先看看这些坑是如何产生的 虽然官方没有说openEuler是基于什么开源系统开发的&#xff0c;但大致内容和CentOS相似…

【教学新纪元】大学电工电子课堂大变身!SmartEDA电路仿真软件助你高效授课✨

在快速迭代的科技时代&#xff0c;教学方式的创新成为了提升教学质量的关键。作为一位深耕电工电子原理教学领域的老师&#xff0c;你是否曾梦想过将复杂的电路理论以直观、互动的方式展现给学生&#xff1f;今天&#xff0c;就让我们一起探索如何利用SmartEDA电路仿真软件&…

鸿蒙开发5.0【基于lycium的开源c库编译与集成】

场景描述 对于c库编译问题&#xff0c;应用经常会遇到如下业务诉求 场景一&#xff1a;基于HarmonyOS编译开源C库 场景二&#xff1a;开源c库编译完成后的集成 方案描述 场景一&#xff1a; 需要使用开源c库 lycium的使用说明&#xff1a;lycium的特点就是自动化编译&am…

8.28-回顾+容器与主机之间的通信+跨主机容器之间的通信

一、回顾 1.启动docker systemctl start docker 2.拉取registry docker pull registry 3.启动镜像&#xff0c;同时挂载目录&#xff08;保存镜像&#xff09;端口映射5000 docker run -d -v /regist/:/var/lib/registry/ -p5000:5000 registry:latest 4.修改/etc/docker/d…

培训第三十八天(上传镜像,私有仓库下载镜像,跨主机容器间的通信,harbor软件包下载)

1、harbor软件包下载 https://github.com/search?qharbor&typerepositories 2、出现拒绝连接错误&#xff0c;可能是由于容器没开 # 问题解决&#xff1a;[rootdocker ~]# curl localhost:5000/v2/_catalogcurl: (7) Failed connect to localhost:5000; 拒绝连接[rootdoc…

pdf怎么转换成excel?掌握好这9个pdf转换方法就够了(全)

pdf怎么转换成excel&#xff1f;日常的办公生活中&#xff0c;我们经常需要接触很多文档格式&#xff0c;而pdf格式文件因为其稳定性和安全性受到很多办公人士的喜爱。但PDF文件不能直接编辑&#xff0c;很多小伙伴们就会出现关于pdf格式转换的难题&#xff0c;比如说想把一份带…

MATLAB虫害检测预警系统

一、课题介绍 本课题是基于MATLAB颜色的植物虫害检测识别&#xff0c;可以辨析植物叶子属于是轻度虫害&#xff0c;中度虫害&#xff0c;严重虫害&#xff0c;正常等四个级别。算法流程&#xff1a;每种等级叶子分别放在同一个文件夹&#xff0c;训练得到每个文件夹每个叶…

SSL安全认证网关:保障网络安全的强大护盾

随着信息技术的飞速发展&#xff0c;我们的生活和工作越来越依赖于网络&#xff0c;但与此同时&#xff0c;网络安全威胁也日益严峻。为了保护我们的信息安全&#xff0c;各种安全技术和产品应运而生&#xff0c;其中SSL安全认证网关就是一种非常重要的安全防护工具。 今天&…

3款伪原创工具,为你轻松一键生成原创文案

在当今信息爆炸的时代&#xff0c;原创内容的重要性愈发凸显。然而&#xff0c;对于许多创作者来说&#xff0c;创作原创文案却是一项费时费力的挑战。幸运的是&#xff0c;随着科技的进步&#xff0c;现在有三款伪原创工具能够帮助你轻松一键生成原创文案&#xff0c;为你节省…

DNS服务器的配置(服务名named,端口53)

目录 前言 配置文件 DNS服务器的配置 主配置文件 扩展配置文件 区域配置文件 重启服务 配置防火墙 配置客户端dns 前言 DNS服务器的主要作用是将人类可读的域名转换为机器可读的IP地址&#xff0c;从而方便用户访问互联网资源。 在互联网中&#xff0c;设备需要通过I…

基于资源管控+TiCDC实现多业务融合容灾测试

作者&#xff1a; 数据源的TiDB学习之路 原文来源&#xff1a; https://tidb.net/blog/959b8d07 背景 金融机构越来越多的选择将多套业务系统融合到一套分布式数据库集群来支撑&#xff0c;一方面可以节约硬件成本&#xff0c;另一方面可以简化运维复杂性。多租户能力及资源…

【电控笔记z26】串级PID单环位置PID

1P-PI 传函(梅森法) : 2PI-P 3PID 三者等效

HyperMesh概述与有限元分析简介

1.1 HyperMesh 概述 本节将介绍有限单元法基本原理&#xff0c;HyperMesh 软件基本功能及界面介绍&#xff0c;获取在线帮助等内容。 1.1.1 有限元分析方法简介 有限单元法&#xff08;FEM&#xff09;是一种可以精确预测复杂结构在外界载荷作用下响应的方法&#xff0c;该数…

问界都回暖了,是谁还在持续掉队?

文/王俣祺 导语&#xff1a;在8月份的最后一个完整周&#xff0c;国内汽车市场的销量表现全面提升&#xff0c;乘用车市场销量达到了46.6万辆车&#xff0c;环比增长13.1%。其中&#xff0c;新能源汽车销量达到24.2万辆&#xff0c;环比增长11.6%&#xff0c;市场渗透率达到了…

《探索现代JavaScript中的异步编程》

探索现代JavaScript中的异步编程 随着Web应用变得越来越复杂&#xff0c;前端开发中对异步处理的需求也日益增加。JavaScript 作为 Web 开发中最主要的语言之一&#xff0c;提供了多种异步编程的方法来帮助开发者编写高效、可维护的应用程序。本文将介绍几种现代 JavaScript 中…

P5928 [国家集训队] 文学 题解

Description 给定 n n n 个半平面 a i x b i y ≤ c i a_i xb_i y\le c_i ai​xbi​y≤ci​ 和 p p p 个关键点 ( x i , y i ) (x_i,y_i) (xi​,yi​)&#xff0c;第 i i i 个半平面有价格 w i w_i wi​&#xff0c;你需要选择一些半平面覆盖所有的关键点&#xff0c;同…

深入探索Elasticsearch:从零基础到实战精通的全方位指南

ElasticSearch 一、初识ElasticSearch1、ES的介绍2、索引3、正排索引3、倒排索引 一、安装1、下载2、检查是否启动 二、语法1、添加一个文档编辑2、批量插入3、搜索4、查询某个特定的字段5、根据id查询6、修改7、删除8、mapping 三、分词器 一、初识ElasticSearch 1、ES的介绍…

大型公司网络系统集成方案

一、前言 1.1.公司综合信息系统建设目标 -----------------------------------------------------3 1.2. 用户具体需求----------------------------------------------------------------------------4 1.3.公司综合信息系统建设原则 -------------------------------…

vue3+ts+mock实现增删改查json文件

1.代码结构图&#xff1a; 2.路由 import { createRouter, createWebHashHistory } from "vue-router";import Home from "/pages/home/index.vue"; import AppDetail from "/pages/app-detail/index.vue"; import PageDetail from "/pages…

hadoop生态圈(四)- MapReduce

目录 MapReduce的基本原理 MapReduce流程图 Map阶段执行流程 Reduce阶段执行流程 Shuffle机制 MapReduce解决的是海量数据计算 MapReduce的思想核心是“分而治之”。就是把一个复杂的问题按一定的“分解”方法分为规模较小的若干部分&#xff0c;然后逐个解决&#xff0c;…