1.復制

說明：復制Tree樹形控件。

<script>
export default {data() {return {data: [{label: '一級 1',children: [{label: '二級 1-1',children: [{label: '三級 1-1-1'}]}]}, {label: '一級 2',children: [{label: '二級 2-1',children: [{label: '三級 2-1-1'}]}, {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'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}
};
</script>
<template>
<div><h1>我是樹形控件</h1><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</template><style scoped></style>

2.顯示?

3.圖標

3.1新增圖標

說明：每一個label前面都有一個定制圖標

<template>
<div><h1>我是樹形控件</h1><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"><span slot-scope="{ node, data }" style="align-items: center"><i class="icon-book"><img style="width: 20px;" src="../../gis/images/bookmark-one.png"></i><span>{{node.label}}</span></span></el-tree>
</div>
</template>

或者

<template>
<div><h1>我是樹形控件</h1><el-tree class="custom-el-tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"><template v-slot="{ node, data }"><span style="align-items: center"><i><img style="width: 20px;" src="../../gis/images/bookmark-one.png"></i><span>{{ node.label }}</span></span></template></el-tree>
</div>
</template>

?

?

3.2修改默認圖標

說明： 將默認箭頭形式變成加號形式。

<style scoped>
/* 加號*/
/deep/ .custom-el-tree .el-icon-caret-right:before {content: "\e6d9";font-size: 18px;
}</style>

?

4.源碼

<script>
export default {data() {return {data: [{label: '一級 1',children: [{label: '二級 1-1',children: [{label: '三級 1-1-1'}]}]}, {label: '一級 2',children: [{label: '二級 2-1',children: [{label: '三級 2-1-1'}]}, {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'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}
};
</script>
<template>
<div><h1>我是樹形控件</h1><el-tree class="custom-el-tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"><template v-slot="{ node, data }"><span style="align-items: center"><i><img style="width: 20px;" src="../../gis/images/bookmark-one.png"></i><span>{{ node.label }}</span></span></template></el-tree>
</div>
</template><style scoped>
/* 加號*/
/deep/ .custom-el-tree .el-icon-caret-right:before {content: "\e6d9";font-size: 18px;
}</style>

?

?