vue tree自定义图标

vue tree自定义图标

效果图

组件代码

<a-tree v-if="treeData.length" :tree-data="treeData" show-icon defaultExpandAll
 :replace-fields="{key:'storeId' }" @select="onSelect">
	<a-icon slot="icon" type="carry-out"/>
	<myIcon slot="rootNode" title="rootNodeIcon"/>
	<myIcon slot="company" title="companyIcon"/>
	<myIcon slot="open" title="openIcon"/>
	<a-icon slot="area" type="environment" />
</a-tree>

根据条件递归set图标

//data返回的树状结构数据
setIcon (data) {
	data.map(item => {
		item.title = item.nodeType !== '2' ? item.storeName : 
		item.storeName + '（' +  this.storeStatusList.
		find(t => t.code === item.storeStatus).name + '）'
		if (item.nodeType !== '0') {
			//子公司
			if(item.nodeType === '1'){
				item.slots = { icon: 'company' }
			}else if(item.nodeType === '3'){
				item.slots = { icon: 'area' }
			}else{
				item.slots = { icon: 'open' }
			}
		} else {
			item.slots = { icon: 'rootNode' }
		}
		if (item.children) {
			this.setIcon(item.children)
		}
		this.tempData.push(item);
	})
	return data
},

引入自定义的icon组件

import myIcon from './myIcon';
export default {
	name: 'BasicInfoStore',
	components: { myIcon },
	data () {
		return {}
	}
}

icon代码

<template>
	<root-node-icon v-if="title === 'rootNodeIcon'"/>
	<company-icon v-else-if="title === 'companyIcon'"/>
	<open-icon v-else-if="title === 'openIcon'"/>
	<close-icon v-else-if="title === 'closeIcon'"/>
</template>
<script>
const rootNodeSvg = {
	template: `<svg  viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;">
    <path class="st0" d="M10.7,1.5l-7.1,4C2.8,6.1,2.2,7,2.2,8v8.1c0,1,0.5,2,1.4,2.5l7.1,4c0.9,0.5,1.9,0.5,2.8,0l7.1-4 c0.9-0.5,1.4-1.4,1.4-2.5V8c0-1-0.5-2-1.4-2.5l-7.1-4C12.7,1,11.6,1,10.7,1.5z M12.9,2.8l7.1,4c0.4,0.3,0.7,0.7,0.7,1.2v8.1 c0,0.5-0.3,1-0.7,1.2l-7.1,4c-0.4,0.2-1,0.2-1.4,0l-7.1-4c-0.4-0.3-0.7-0.7-0.7-1.2V8c0-0.5,0.3-1,0.7-1.2l7.1-4 C11.9,2.5,12.4,2.5,12.9,2.8L12.9,2.8z"/>
    <path class="st0" d="M12.2,11.7c0.3,0,0.6,0.2,0.7,0.6l0,0.1v6c0,0.4-0.3,0.7-0.7,0.7c-0.3,0-0.6-0.2-0.7-0.6l0-0.1v-6 C11.4,12,11.8,11.7,12.2,11.7z"/>
    <path class="st0" d="M17.1,8.8c0.3-0.2,0.8-0.1,1,0.3c0.2,0.3,0.1,0.7-0.2,0.9L17.8,10l-5.3,3c-0.3,0.2-0.8,0.1-1-0.3 c-0.2-0.3-0.1-0.7,0.2-0.9l0.1-0.1L17.1,8.8L17.1,8.8z"/>
    <path class="st0" d="M7.1,8.8C6.8,8.6,6.4,8.7,6.2,9C6,9.3,6.1,9.7,6.3,9.9L6.4,10l5.3,3c0.3,0.2,0.8,0.1,1-0.3 c0.2-0.3,0.1-0.7-0.2-0.9l-0.1-0.1L7.1,8.8L7.1,8.8z"/>
    </svg>`,
}

const companySvg = {
	template: `<svg viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;">
    <path class="st0" d="M20.1,8.1h-3.9v-4c0-1.5-1.2-2.7-2.7-2.8H4.1c-1.5,0-2.7,1.3-2.7,2.8c0,0,0,0,0,0v18.5h21.2v-12 C22.6,9.3,21.5,8.1,20.1,8.1C20.1,8.1,20.1,8.1,20.1,8.1z M6.9,21v-3.4c0-0.2,0.1-0.3,0.3-0.3h3.4c0.2,0,0.3,0.1,0.3,0.3V21H6.9z M12.3,21v-3.4c0-1-0.8-1.9-1.8-1.9H7.1c-1,0-1.9,0.9-1.9,1.9V21H2.9V4.2C2.9,3.5,3.4,3,4,3h9.5c0.6,0,1.1,0.5,1.1,1.2V21L12.3,21z M21,21h-4.8V9.7h3.9c0.5,0,0.9,0.4,0.9,0.9c0,0,0,0,0,0L21,21L21,21z"/>
    <path class="st0" d="M11.6,5.7H5.1c-0.5,0.1-0.9,0.5-0.8,1c0.1,0.4,0.4,0.7,0.8,0.8h6.4c0.5-0.1,0.9-0.5,0.8-1 C12.3,6,12,5.7,11.6,5.7z M11.6,10.6H5.1c-0.5,0.1-0.9,0.5-0.8,1c0.1,0.4,0.4,0.7,0.8,0.8h6.4c0.5-0.1,0.9-0.5,0.8-1 C12.3,11,12,10.7,11.6,10.6z"/>
    </svg>`
}

const openSvg = {
	template: `<svg viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;">
        <path class="st0" d="M4.8,9C4.5,9,4.3,8.7,4.3,8.5c0-0.1,0.1-0.3,0.2-0.4l4.2-3.9C8.8,4,9.1,4,9.3,4.2c0.2,0.2,0.2,0.5,0,0.7 L5.1,8.8C5,8.9,4.9,9,4.8,9L4.8,9z M4.9,22.5c-1.3,0-2.4-1-2.5-2.3l-0.8-8c-0.1-1.4,0.9-2.6,2.2-2.7l14.9-1.5 c1.4-0.1,2.6,0.9,2.7,2.2l0.8,8c0.1,1.4-0.9,2.6-2.2,2.7L5.2,22.5C5.1,22.5,5,22.5,4.9,22.5L4.9,22.5z M19.1,9.1c-0.1,0-0.1,0-0.2,0 L4,10.5c-0.8,0.1-1.4,0.8-1.3,1.6l0.8,8c0.1,0.8,0.8,1.4,1.6,1.3c0,0,0,0,0,0L20,20c0.8-0.1,1.4-0.8,1.3-1.6l-0.8-8 C20.5,9.7,19.8,9.1,19.1,9.1L19.1,9.1z M10.8,4.5C10,4.5,9.3,3.8,9.3,3s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5C12.3,3.8,11.6,4.5,10.8,4.5 z M10.8,2.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5S11.1,2.5,10.8,2.5C10.8,2.5,10.8,2.5,10.8,2.5z M12.7,4.3 C12.6,4,12.8,3.8,13,3.7c0.1,0,0.3,0,0.4,0.1l4.8,3c0.2,0.1,0.3,0.5,0.2,0.7c-0.1,0.2-0.5,0.3-0.7,0.2l-4.8-3 C12.8,4.5,12.7,4.4,12.7,4.3L12.7,4.3z"/>
        <text transform="matrix(0.995 -0.1001 0.1001 0.995 3.7339 19.4867)">OPEN</text>
    </svg>`
}

const closeSvg = {
	template: `<svg viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;">
        <path class="st0" d="M4.8,9C4.5,9,4.3,8.7,4.3,8.5c0-0.1,0.1-0.3,0.2-0.4l4.2-3.9C8.8,4,9.1,4,9.3,4.2c0.2,0.2,0.2,0.5,0,0.7 L5.1,8.8C5,8.9,4.9,9,4.8,9L4.8,9z M4.9,22.5c-1.3,0-2.4-1-2.5-2.3l-0.8-8c-0.1-1.4,0.9-2.6,2.2-2.7l14.9-1.5 c1.4-0.1,2.6,0.9,2.7,2.2l0.8,8c0.1,1.4-0.9,2.6-2.2,2.7L5.2,22.5C5.1,22.5,5,22.5,4.9,22.5L4.9,22.5z M19.1,9.1c-0.1,0-0.1,0-0.2,0 L4,10.5c-0.8,0.1-1.4,0.8-1.3,1.6l0.8,8c0.1,0.8,0.8,1.4,1.6,1.3c0,0,0,0,0,0L20,20c0.8-0.1,1.4-0.8,1.3-1.6l-0.8-8 C20.5,9.7,19.8,9.1,19.1,9.1L19.1,9.1z M10.8,4.5C10,4.5,9.3,3.8,9.3,3s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5C12.3,3.8,11.6,4.5,10.8,4.5 z M10.8,2.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5S11.1,2.5,10.8,2.5C10.8,2.5,10.8,2.5,10.8,2.5z M12.7,4.3 C12.6,4,12.8,3.8,13,3.7c0.1,0,0.3,0,0.4,0.1l4.8,3c0.2,0.1,0.3,0.5,0.2,0.7c-0.1,0.2-0.5,0.3-0.7,0.2l-4.8-3 C12.8,4.5,12.7,4.4,12.7,4.3L12.7,4.3z"/>
        <text transform="matrix(0.995 -0.1001 0.1001 0.995 3.7525 18.9285)">CLOSE</text>
    </svg>`
}

//根节点icon
const rootNodeIcon = {
	template: `
		<a-icon :component="rootNodeSvg"/> `, data () {
		return { rootNodeSvg }
	}
}

//子公司icon
const companyIcon = {
	template: `
		<a-icon :component="companySvg"/> `, data () {
		return { companySvg }
	}
}

//营业中icon
const openIcon = {
	template: `
		<a-icon :component="openSvg"/> `, data () {
		return { openSvg }
	}
}

//闭店icon
const closeIcon = {
	template: `
		<a-icon :component="closeSvg"/> `, data () {
		return { closeSvg }
	}
}

export default {
	name: 'myIcon',
	props: ['title'],
	components: {
		rootNodeIcon,
		companyIcon,
		openIcon,
		closeIcon,
	},
}
</script>