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                   // debugger
63                   console.log("1111111111111",row)
64                   console.log("222222222222",row.show)
65                     if(row.show){                    
66                         this.$refs.tree.setCurrentKey(row.id);
67                         this.$refs.tree.store.nodesMap[row.id].expanded = true;
68                     }
69                 })
70             })
71         },
72         methods: {
73             handleNodeClick: function (data,checked) {
74                 // 點擊事件
75             },
76             handleCheckChange(data, checked, indeterminate) {
77                 console.log(data, checked, indeterminate);
78             },
79         }
80     }
81 </script>
82     
83 <style scoped>
84  .warpper .el-tree--highlight-current /deep/ .el-tree-node.is-checked > .el-tree-node__content {
85     background-color: rgb(255, 255, 255);
86     color:rgb(64, 158, 255);
87   }
88  .warpper .el-tree--highlight-current /deep/ .el-tree-node.is-current > .el-tree-node__content {
89     background-color: rgb(255, 255, 255);
90     color:rgb(64, 158, 255);
91   }
92 </style>