vue + element ui工程，Tree 树形控件展示指定值，比如name
1.element ui的Tree 树形控件数据官方例子中展示label。
2.本文实现目的：采用数据中的name作为展示项。
数据效果图：
数据：
data() {
const data = [
{
id: 1,
name: '一级 1',
iconType: 'group',
children: [{
id: 4,
name: '二级 1-1',
}, {
id: 9,
name: '三级 1-1-1'
}, {
id: 10,
name: '三级 1-1-2'
}]
}, {
id: 2,
name: '一级 2',
iconType: 'group',
children: [{
id: 5,
name: '二级 2-1'
}, {
id: 6,
name: '二级 2-2'
}]
}, {
id: 3,
name: '一级 3',
iconType: 'group',
children: [{
id: 7,
name: '二级 3-1'
}, {
id: 8,
name: '二级 3-2'
}]
}]
let dataHome = [{
id: 1,
label: '基础数据目录',
iconType: 'home',
children: data
}]
return {
nodeData: {
},
data: JSON.parse(JSON.stringify(dataHome)),
icon: {
home: 'el-icon-s-home',
group: 'el-icon-folder',
other: 'el-icon-document'
},
}
},
vue页面代码
使用node的data数据
<template>
<el-container>
<el-aside width="220px" class="sider-class">
<div class="custom-tree-container">
<div class="block">
<el-tree
:data="data"
node-key="id"
default-expand-all
@node-click="nodeClick"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span> <i :class='icon[data.iconType]||icon["other"]'></i></span>
<span>{
{
node.data.name }}</span>
<span>
<i class="el-icon-plus" @click.stop="() => append(data)"></i>
<i class="el-icon-edit" @click="() => update(data,node)"></i>
<i class="el-icon-delete" @click="() => remove(node, data)"></i>
</span>
</span>
</el-tree>
</div>
</div>
</el-aside>
<el-main class="navigation-rule-form">
</el-main>
</el-container>
</template>
整体代码如下：
<template>
<el-container>
<el-aside width="220px" class="sider-class">
<div class="custom-tree-container">
<div class="block">
<el-tree
:data="data"
node-key="id"
default-expand-all
@node-click="nodeClick"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span> <i :class='icon[data.iconType]||icon["other"]'></i></span>
<span>{
{
node.data.name }}</span>
<span>
<i class="el-icon-plus" @click.stop="() => append(data)"></i>
<i class="el-icon-edit" @click="() => update(data,node)"></i>
<i class="el-icon-delete" @click="() => remove(node, data)"></i>
</span>
</span>
</el-tree>
</div>
</div>
</el-aside>
<el-main class="navigation-rule-form">
</el-main>
</el-container>
</template>
<script>
export default {
name: 'hello-world',
data() {
const data = [
{
id: 1,
name: '一级 1',
iconType: 'group',
children: [{
id: 4,
name: '二级 1-1',
}, {
id: 9,
name: '三级 1-1-1'
}, {
id: 10,
name: '三级 1-1-2'
}]
}, {
id: 2,
name: '一级 2',
iconType: 'group',
children: [{
id: 5,
name: '二级 2-1'
}, {
id: 6,
name: '二级 2-2'
}]
}, {
id: 3,
name: '一级 3',
iconType: 'group',
children: [{
id: 7,
name: '二级 3-1'
}, {
id: 8,
name: '二级 3-2'
}]
}]
let dataHome = [{
id: 1,
label: '基础数据目录',
iconType: 'home',
children: data
}]
return {
nodeData: {
},
data: JSON.parse(JSON.stringify(dataHome)),
icon: {
home: 'el-icon-s-home',
group: 'el-icon-folder',
other: 'el-icon-document'
},
}
},
methods: {
nodeClick(data, node) {
console.log(data, node)
},
append(data, node) {
console.log(data, node)
},
remove(data, node) {
console.log(data, node)
},
update(data, node) {
console.log(data, node)
},
}
}
</script>
<style scoped>
.sider-class {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.navigation-rule-form {
flex: none;
}
</style>
系统源码链接: vue+elementui样例