element簡易樹形下拉框

本文轉載自查看原文 2020-08-24 11:55 3802

好久沒寫寫博客了，今天出來冒個泡

element-ui沒有直接提供樹形下拉框，但是用提供的下拉框和樹狀可以很快捷的封裝一個簡易版本的

今天發個簡易的版本的供大家參考，如有錯誤或者問題可以提出，博主會虛心接受改善謝謝

HTML部分代碼是簡易的下拉框和樹形框組合，更多的參數可自行擴展

 1 <template>
 2 　　<div class="box">
 3         <el-select size="small" placeholder="請選擇" clearable v-model="selectLabel" @clear="selectClear">
 4             <el-option class="option-style" :label="selectLabel" :value="selectValue">
 5                 <el-input class="search" size="small" placeholder="輸入關鍵字進行過濾" v-model="keywork" @click.stop.native></el-input>
 6                 <el-tree
 7                 ref="tree"
 8                 :data="treeDate"
 9                 :props="treeProps"
10                 :show-checkbox="showCheckbox"
11                 :filter-node-method="filterNode"
12                 @node-click="nodeClick"
13                 @check-change="checkChange">
14                     <div slot-scope="{node, data}">
15                         <i class="el-icon-warning-outline"></i>
16                         <span :class="[{'tree-click': treeClick==data.value}]">{{data.label}}</span>
17                     </div>
18                 </el-tree>
19             </el-option>
20         </el-select>
21 　　</div>
22 </template>

CSS部分代碼如下

 1 .box{
 2     width: 100%;
 3     height: 100%;
 4   　margin: 1rem;
 5 }
 6 .search{
 7   width: calc(100% - 8px - 0.5rem);
 8   margin: 0 0.5rem;
 9 }
10 .option-style{
11   padding: 0;
12   width: 100%;
13   height: 100%;
14   background-color: #FFFFFF;
15 }
16 .tree-click{
17   color: #4D74D6;
18   font-weight: 600;
19 }
20 /deep/ .el-tree-node__content{
21   padding: 0.25rem;
22 }
23 /deep/ .el-icon-caret-right{
24   font-size: 0;
25 }

JS部分代碼如下

 1 <script>
 2 export default{
 3     name: "test",
 4     components: {
 5 
 6     },
 7     data(){
 8       return{
 9       　　treeClick: null,        　//點擊樣式
10       　　keywork: null,　　　　　　　//搜索關鍵字
11       　　selectLabel: null,    　　//下拉框顯示名稱
12       　　selectValue: null,    　　//下拉框顯示ID
13       　　treeDate: [
14         　　{label: "主-測試0", value: 0, children: [
15           　　{label: "子-測試0", value: 6}
16         　　]},
17         　　{label: "主-測試1", value: 1, children: [
18           　　{label: "子-測試1", value: 7}
19         　　]},
20         　　{label: "主-測試2", value: 2, children: [
21           　　{label: "子-測試2", value: 8}
22         　　]},
23         　　{label: "主-測試3", value: 3, children: [
24           　　{label: "子-測試3", value: 9}
25         　　]},
26         　　{label: "主-測試4", value: 4, children: [
27           　　{label: "子-測試4", value: 10}
28         　　]},
29         　　{label: "主-測試5", value: 5, children: [
30           　　{label: "子-測試6", value: 11},
31           　　{label: "子-測試7", value: 12}
32         　　]}
33       　　],
34       　　treeProps: {
35         　　children: "children",
36         　　label: "label"
37       　　}
38        }
39     },
40   　props:{
41     // treeDate: {//樹狀數據
42     //   type: Array,
43     //   default: ()=>{}
44     // },
45     // treeProps: {//樹狀規則
46     //   type: Object,
47     //   default: ()=>{}
48     // },
49     showCheckbox: {//是否可選擇
50       type: Boolean,
51       default: true
52     }
53   },
54   methods:{
55     selectClear(){
56       this.treeClick = null;
57       this.selectLabel = null;
58       this.selectValue = null;
59     },
60     filterNode(value, data){
61       if(!value){
62         return true;
63       }
64       return data.label.indexOf(value) !== -1;
65     },
66     nodeClick(obj, node){
67       this.treeClick = obj.value;
68       this.selectLabel = obj.label;
69       this.selectValue = obj.value;
70       console.log(obj, node);
71     },
72     checkChange(obj, node){
73       console.log(obj, node);
74     },
75   },
76   watch:{
77     keywork(val){
78       this.$refs.tree.filter(val);
79     }
80   },
81   computed:{
82 
83   },
84   created(){
85 
86   },
87   mounted(){
88 
89   },
90   beforeDestroy(){
91 
92   }
93 }
94 </script>

完整代碼如下

  1 <template>
  2   <div class="box">
  3         <el-select size="small" placeholder="請選擇" clearable v-model="selectLabel" @clear="selectClear">
  4             <el-option class="option-style" :label="selectLabel" :value="selectValue">
  5                 <el-input class="search" size="small" placeholder="輸入關鍵字進行過濾" v-model="keywork" @click.stop.native></el-input>
  6                 <el-tree
  7                 ref="tree"
  8                 :data="treeDate"
  9                 :props="treeProps"
 10                 :show-checkbox="showCheckbox"
 11                 :filter-node-method="filterNode"
 12                 @node-click="nodeClick"
 13                 @check-change="checkChange">
 14                     <div slot-scope="{node, data}">
 15                         <i class="el-icon-warning-outline"></i>
 16                         <span :class="[{'tree-click': treeClick==data.value}]">{{data.label}}</span>
 17                     </div>
 18                 </el-tree>
 19             </el-option>
 20         </el-select>
 21     </div>
 22 </template>
 23 
 24 <script>
 25 export default{
 26     name: "test",
 27     components: {
 28 
 29     },
 30     data(){
 31       return{
 32         treeClick: null,　　　　　　//點擊樣式
 33         keywork: null,　　　　　　　//搜索關鍵字
 34         selectLabel: null,    　　//下拉框顯示名稱
 35         selectValue: null,    　　//下拉框顯示ID
 36         treeDate: [
 37           {label: "主-測試0", value: 0, children: [
 38             {label: "子-測試0", value: 6}
 39           ]},
 40           {label: "主-測試1", value: 1, children: [
 41             {label: "子-測試1", value: 7}
 42           ]},
 43           {label: "主-測試2", value: 2, children: [
 44             {label: "子-測試2", value: 8}
 45           ]},
 46           {label: "主-測試3", value: 3, children: [
 47             {label: "子-測試3", value: 9}
 48           ]},
 49           {label: "主-測試4", value: 4, children: [
 50             {label: "子-測試4", value: 10}
 51           ]},
 52           {label: "主-測試5", value: 5, children: [
 53             {label: "子-測試6", value: 11},
 54             {label: "子-測試7", value: 12}
 55           ]}
 56         ],
 57         treeProps: {
 58           children: "children",
 59           label: "label"
 60         }
 61       }
 62     },
 63     props:{
 64       // treeDate: {//樹狀數據
 65       //   type: Array,
 66       //   default: ()=>{}
 67       // },
 68       // treeProps: {//樹狀規則
 69       //   type: Object,
 70       //   default: ()=>{}
 71       // },
 72       showCheckbox: {//是否可選擇
 73         type: Boolean,
 74         default: true
 75       }
 76     },
 77     methods:{
 78       selectClear(){
 79         this.treeClick = null;
 80         this.selectLabel = null;
 81         this.selectValue = null;
 82       },
 83       filterNode(value, data){
 84         if(!value){
 85           return true;
 86         }
 87         return data.label.indexOf(value) !== -1;
 88       },
 89       nodeClick(obj, node){
 90         this.treeClick = obj.value;
 91         this.selectLabel = obj.label;
 92         this.selectValue = obj.value;
 93         console.log(obj, node);
 94       },
 95       checkChange(obj, node){
 96         console.log(obj, node);
 97       },
 98     },
 99     watch:{
100       keywork(val){
101         this.$refs.tree.filter(val);
102       }
103     },
104     computed:{
105 
106     },
107     created(){
108 
109     },
110     mounted(){
111 
112     },
113     beforeDestroy(){
114 
115     }
116 }
117 </script>
118 
119 <style scoped>
120 .box{
121     width: 100%;
122     height: 100%;
123     margin: 1rem;
124 }
125 .search{
126   width: calc(100% - 8px - 0.5rem);
127   margin: 0 0.5rem;
128 }
129 .option-style{
130   padding: 0;
131   width: 100%;
132   height: 100%;
133   background-color: #FFFFFF;
134 }
135 .tree-click{
136   color: #4D74D6;
137   font-weight: 600;
138 }
139 /deep/ .el-tree-node__content{
140   padding: 0.25rem;
141 }
142 /deep/ .el-icon-caret-right{
143   font-size: 0;
144 }
145 </style>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 心基於Element-UI的組件改造的樹形選擇器（樹形下拉框） Vue實現樹形下拉框樹形下拉框動態加載數據樹形下拉框實現 miniui treeselect EasyUI樹形下拉框級聯 Element el-tree el-select 樹形下拉框可輸入的下拉框（簡易實現） vue + element的動態下拉框 Element vue Select 下拉框默認 element 下拉框整體樣式修改