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>

 

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

 

posted @ 2019-06-13 11:22  此夏_唯美  阅读(12491)  评论(2)  编辑  收藏  举报