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
其中包括,需要传输什么样的参数,然后等到什么结果。