基於Element的下拉框,多選框的封裝

  Element是有自己的多選框的,但是,他的兩種表現形式不是我們所想要的。所以,就以Element的下拉多選框爲基礎,封裝了一個自己的多選框。廢話不多說,直接上圖

 

 1、增加一個全部的功能,然後讓選擇全部之後,上面的顯示框中只顯示“全部”兩個字

 2、當顯示不全的時候,顯示省略號

 

 3、剩下的交互邏輯,就很簡單了,點擊,全部,讓所有的全部選中,點擊取消全部,讓所有的取消選中

直接來看我封裝的組件吧,裏面的註釋會解釋的比較清楚

  1 <template>
  2   <div id="mySelect" :class="isAll?'isAll':''">
  3     <el-select
  4       v-model="searchSelect"
  5       multiple
  6       filterable
  7       placeholder="請選擇"
  8       @change="selectChange"
  9       popper-class="cheng"
 10     >
 11       <el-option
 12         v-for="item in selectOption"
 13         :key="item.value"
 14         :label="item.label"
 15         :value="item.value"
 16       ></el-option>
 17     </el-select>
 18   </div>
 19 </template>
 20 <script>
 21 export default {
 22   name: "mySelect",
 23   data() {
 24     return {
 25       searchSelect: [], // 下拉選擇框中的內容
 26       oldSearchSelect: [], // 原來的下拉框中的內容
 27       selectOption: [
 28         
 29       ],
 30       isAll:true, // 是不是全選中了
 31     };
 32   },
 33   props: {
 34     option:{ // 傳輸過來的數組
 35       type:Array,
 36       default:[]
 37     },
 38     label:{ // 做一個字典,顯示的值
 39       type:String,
 40       default:"label"
 41     },
 42     value:{ // 做一個字典,實際的值
 43       type:String,
 44       default:"value"
 45     }
 46   },
 47   watch:{
 48     option(){
 49       if(this.option.length!=0 && this.value in this.option[0] && this.label in this.option[0]){
 50         this.selectOption.push({
 51           value: "all",
 52           label: "全部"
 53         });
 54         this.option.map(item=>{
 55           this.selectOption.push({
 56             value: item[this.value],
 57             label: item[this.label]
 58           })
 59         })
 60         this.selectOption.map(item=>{
 61           this.searchSelect.push(item.value);
 62           this.oldSearchSelect.push(item.value);
 63         })
 64       }
 65     }
 66   },
 67   mounted() {
 68     // console.log(this.opeion);
 69   },
 70   components: {},
 71   computed: {},
 72   methods: {
 73 
 74     // 下拉框選擇
 75     selectChange(){
 76       // console.log(this.searchSelect);
 77       let oldIndexOfValue = this.oldSearchSelect.indexOf("all");
 78       let indexOfValue = this.searchSelect.indexOf("all");
 79       if(oldIndexOfValue!=-1 && indexOfValue!=-1){ // 兩個都有ALL,則表示只是去掉了莫一項
 80         this.searchSelect.splice(indexOfValue,1);
 81         this.isAll = false;
 82         this.saveNewSearchSelect();
 83       }else if(oldIndexOfValue==-1 && indexOfValue!=-1){ // 老數據沒有all,新的有的,表明需要全選
 84         this.searchSelect.splice(0);
 85         this.oldSearchSelect.splice(0);
 86         this.isAll = true;
 87         this.selectOption.map(item=>{
 88           this.searchSelect.push(item.value);
 89           this.oldSearchSelect.push(item.value);
 90         })
 91       }else if(oldIndexOfValue!=-1 && indexOfValue==-1){ // 老數據有all,但是新的數據沒有all,表明需要全不選
 92         this.searchSelect.splice(0);
 93         this.oldSearchSelect.splice(0);
 94         this.isAll = false;
 95       }else if(oldIndexOfValue==-1 && indexOfValue==-1){ // 兩個都沒有ALL,表示只是選擇了一下,需要判斷是不是都選上
 96         let isAllSelected = false; 
 97         let allOption = [];
 98         this.selectOption.map(item=>{
 99           if(item.value!="all"){
100             allOption.push(item.value);
101           }
102         })
103         if(allOption.length == this.searchSelect.length){
104           this.isAll = true;
105           // this.searchSelect.push("all");
106           this.searchSelect.splice(0,0,"all")
107           this.saveNewSearchSelect();
108         }
109       }
110     },
111     // 保存原來的數據
112     saveNewSearchSelect(){
113       this.oldSearchSelect.splice(0);
114       this.searchSelect.map(item=>{
115         this.oldSearchSelect.push(item);
116       })
117     },
118   }
119 };
120 </script>
121 <style lang="scss">
122 .el-select__tags{
123   height: 26px;
124   overflow: hidden;
125   // text-overflow: ellipsis;
126   &>span{
127     white-space: nowrap;
128     overflow: hidden;
129     display: block;
130   }
131 }
132 .el-select .el-select__tags>span{
133   overflow: hidden;
134   text-overflow: ellipsis;
135   display: inline-block!important;
136   // width: 70%;
137   max-width: 90%;
138 }
139 .el-tag.el-tag--info .el-tag__close{
140   display: none;
141 }
142 .isAll{
143   .el-select .el-select__tags>span{
144     span:nth-child(n+2){
145       display: none;
146     }
147   }
148 }
149 
150 </style>

使用的方式如下

 1 import mySelect from "@/components/mySelect";
 2 
 3 components: {
 4     mySelect
 5 },
 6 
 7 <my-select ref="tenantselect" :option="tenantNameOption" :value="'value'" :label="'label'"/>
 8 
 9 //option:爲所有的下拉框選項
10 //value:爲實際的 傳參
11 //label:爲顯示的數據
12 
13 // 例: 如果你的數據是這樣的,var list = [{
14 //     id:'apple',
15 //     name:"蘋果"
16 // },{
17 //     id:'orange',
18 //     name:"橘子"
19 // }]
20 
21 // <my-select ref="tenantselect" :option="list" :value="'id'" :label="'name'"/>
22 // 獲取現在選中的值
23 // $refs.tenantselect.searchSelect

其中包括,需要傳輸什麼樣的參數,然後等到什麼結果。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章