基于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

其中包括，需要传输什么样的参数，然后等到什么结果。