1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| <!--
| * @Author: zxq
| * @Date: 2022-07-19 10:32:01
| * @LastEditors: zxq
| * @LastEditTime: 2023-01-03 11:08:50
| * @Description: Description
| * @FilePath: \qyp-plat\src\components\secect.vue
| -->
| <template>
| <el-select
| multiple
| filterable
| :disabled="disabled"
| v-model='selectedArr'
| :loading="mulSelectLoading"
| placeholder='请选择'
| @change='changeSelect'
| @remove-tag='removeTag'>
| <el-option label='全部' value='all' @click.native='selectAll' v-if="selectOptions.length"></el-option>
| <el-option v-for='item in selectOptions' :key='item.code' :label='item.name' :value='item.code'></el-option>
| </el-select>
| </template>
|
| <script>
| export default {
| name: 'MultipleSelect',
| data() {
| return {
| selectedArr: [],
| }
| },
| created(){
| // this.changeSelect(['all']);
| },
| props:{
| value:{
| type:Array|Number|String|Object,
| default:{}|[]
| },
| // 选项
| selectOptions:{
| type:Array,
| default(){
| return []
| }
| },
| // 是否禁用
| disabled:{
| type:Boolean,
| default:false
| },
| // 已选中选项
| mulSelecteds:{
| type:Array,
| default(){
| return []
| }
| },
| mulSelectLoading:{
| type:Boolean,
| default:false
| },
| collapseTags:{
| type:Boolean,
| default:true
| }
| },
| methods: {
| selectAll() {
| if (this.selectedArr.length < this.selectOptions.length) {
| this.selectedArr = []
| // this.selectOptions.map((item) => {
| // this.selectedArr.push(item.code)
| // })
| this.selectedArr.unshift('all');
| } else {
| // 取消全部
| this.selectedArr = [];
| }
| this.$emit('input', this.selectedArr);
| this.$emit('update:updateMultipleSelect',this.selectedArr);
| },
| changeSelect(val) {
| if (!val.includes('all') && val.length === this.selectOptions.length) {
| // 如果选中所有不包含全部的选项改变成全部
| this.selectedArr =['all'];
| } else if (val.includes('all') && (val.length - 1) < this.selectOptions.length) {
| this.selectedArr = this.selectedArr.filter((item) => { return item !== 'all'})
| }
| this.$emit('input', this.selectedArr);
| },
| removeTag(val) {
| if (val === 'all') {
| this.selectedArr = [];
| this.$emit('input', this.selectedArr);
| this.$emit('update:updateMultipleSelect',this.selectedArr);
| }
| }
| },
| watch:{
| value(val) {
| this.selectedArr = val;
| },
| selectedArr: {
| handler(newVal,oldVal){
| if (newVal !== oldVal) {
| // let checkIndex = newVal.indexOf('all');
| // if(checkIndex>-1){
| // newVal.splice(checkIndex, 1);
| // }
| this.$emit('input', newVal);
| }
| if (!newVal.includes('all') && newVal.length && (newVal.length === this.selectOptions.length)){
| this.selectedArr.unshift('all')
| }
| },
| immediate: true
| }
| }
| }
| </script>
|
|
