Element-ui框架Tree树形控件切换高亮显示选中效果

         

废话不多说，直接上代码

 1 <template>
 2     <div class="warpper">
 3         <el-tree ref="tree" :data="TreeData" node-key="id" :key="treeKey" current-node-key :props="defaultProps" highlight-current @node-click="handleNodeClick"></el-tree>
 4     </div>
 5 </template>
 6
 7 <script>
 8     export default {
 9         data() {
10             return {
11                 ParmentData: null,
12                 TreeData: [
13                     {
14                         id: 1,
15                         label: '一级 1',
16                         children: [
17                             {
18                                 id: 4,
19                                 label: '二级 1-1',
20                                 children: [
21                                     { id: 9, label: '三级 1-1-1' },
22                                     { id: 10, label: '三级 1-1-2' }
23                                 ]
24                             }
25                         ]
26                     }, {
27                         id: 2,
28                         label: '一级 2',
29                         children: [
30                             {
31                                 id: 5,
32                                 label: '二级 2-1'
33                             }, {
34                                 id: 6,
35                                 label: '二级 2-2'
36                             }
37                         ]
38                     }, {
39                         id: 3,
40                         label: '一级 3',
41                         children: [
42                             {
43                                 id: 7,
44                                 label: '二级 3-1'
45                             }, {
46                                 id: 8,
47                                 label: '二级 3-2'
48                             }
49                         ],
50                         show: true
51                     }],
52                 defaultProps: {
53                     children: 'children',
54                     label: 'label'
55                 },
56                 treeKey:'',
57             }
58         },
59         created() {
60             this.$nextTick(function(){
61                 this.$data.TreeData.forEach(row => {
62                     if(row.show){
63                         this.$refs.tree.setCurrentKey(row.id);
64                         this.$refs.tree.store.nodesMap[row.id].expanded = true;
65                     }
66                 })
67             })
68         },
69         methods: {
70             handleNodeClick: function (data,checked) {
71                 // 点击事件
72             },
73             handleCheckChange(data, checked, indeterminate) {
74                 console.log(data, checked, indeterminate);
75             },
76         }
77     }
78 </script>
79
80 <style scoped>
81  .warpper .el-tree--highlight-current /deep/ .el-tree-node.is-checked > .el-tree-node__content {
82     background-color: rgb(255, 255, 255);
83     color:rgb(64, 158, 255);
84   }
85  .warpper .el-tree--highlight-current /deep/ .el-tree-node.is-current > .el-tree-node__content {
86     background-color: rgb(255, 255, 255);
87     color:rgb(64, 158, 255);
88   }
89 </style>

顺便为大家推荐好听的歌曲