<template>
<div id="app">
<el-tree
:data="deptOptions"
ref="tree"
default-expand-all
>
<span class="custom-tree-node" style="display:flex;align-items: center;" slot-scope="{ data }">
<el-image style="width: 1.2;height: 1.2em;margin-right:12px;" :src="data.img" v-if="data.img"/>
{{data.label}}
</span>
</el-tree>
</div>
</template>
<script>
export default {
name:'addModule',
data(){
return {
deptOptions: [
{
img: 'https://t9.baidu.com/it/u=3089160928,2212826629&fm=218&app=126&f=JPEG?w=121&h=75&s=F1121CD140972E661A3B8911030060DB',
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
img: 'https://t9.baidu.com/it/u=3089160928,2212826629&fm=218&app=126&f=JPEG?w=121&h=75&s=F1121CD140972E661A3B8911030060DB',
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
img: 'https://t9.baidu.com/it/u=3089160928,2212826629&fm=218&app=126&f=JPEG?w=121&h=75&s=F1121CD140972E661A3B8911030060DB',
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}]
}
},
}
</script>
element ui Tree 插入图片
最新推荐文章于 2022-08-07 17:24:02 发布