1.需求
Select 选择器 多选需要增加 全选 和 取消全选 功能，前端框架为vue2，UI组件为elementUI。
2. 代码
- html部分
<template>
<el-tooltip effect="dark"
:disabled="defaultValue.length <= 0"
:content="defaultValue.join('、')"
placement="top"
>
<el-select
v-model="value"
:multiple="true"
collapse-tags
:disabled="disabled"
:placeholder="placeholder"
@change="selectChange"
>
<el-option
v-if="needSelectAll && defaultOptions.length > 0"
:label="selectAllLabel"
:value="selectAllValue"
>
{
{ defaultOptions.length === defaultValue.length ? '取消' : '' }}{
{ selectAllLabel }}
</el-option>
<el-option
v-for="(each, i) in defaultOptions"
:key="i"
:label="each.label"
:value="each.value"
/>
</el-select>
</el-tooltip>
</template>
- js部分
export default {
props: {
defaultValue: {
type: [Array, String, Number],
default() {
return [];
}
},
disabled: {
type: Boolean,
default() {
return false;
}
},
placeholder: {
type: String,
default() {
return '';
}
},
defaultOptions: {
type: Array,
default() {
return [];
}
},
needSelectAll: {
type: Boolean,
default() {
return false;
}
},
selectAllLabel: {
type: String,
default() {
return '全部';
}
}
},
data() {
return {
value: [],
selectAllValue: 'all全部'
};
},
watch: {
defaultValue() {
this.initData();
}
},
created() {
this.initData();
},
methods: {
updateVal(val, needEmit) {
const {
defaultOptions } = this;
const list = defaultOptions.map(item => item.value);
this.$emit('update:defaultValue', val.filter(item => list.indexOf(item) >= 0));
if (needEmit) {
this.$nextTick(() => {
this.$emit('change', this.defaultValue);
});
} else {
/**/ }
},
selectChange(val) {
const {
needSelectAll, selectAllValue, value, defaultValue, defaultOptions } = this;
let arr = value.slice();
if (needSelectAll) {
arr = arr.filter(item => item !== selectAllValue);
if (!this.judgeArrValEqual(arr, defaultValue)) {
this.updateVal(arr);
} else {
if (value.indexOf(selectAllValue) >= 0) {
if (arr.length < defaultOptions.length) {
defaultOptions.forEach(item => {
if (value.indexOf(item.value) < 0) {
value.push(item.value);
} else {
/**/ }
});
this.updateVal(value.filter(item => item !== selectAllValue));
} else {
/**/ }
} else {
value.splice(0, value.length);
this.updateVal([]);
}
}
} else {
if (!this.judgeArrValEqual(arr, defaultValue)) {
this.updateVal(arr);
} else {
/**/ }
}
},
judgeArrValEqual(list1, list2) {
list1 = list1 && list1.length > 0 ? list1 : [];
list2 = list2 && list2.length > 0 ? list2 : [];
const arr1 = list1.slice().sort();
const arr2 = list2.slice().sort();
if (arr1.join(',') === arr2.join(',')) {
return true;
} else {
return false;
}
},
initData() {
const {
defaultValue, defaultOptions, value, needSelectAll, selectAllValue } = this;
if (typeof defaultValue === 'string') {
this.updateVal(defaultValue.split(','), false);
return;
} else if (typeof defaultValue === 'number') {
this.updateVal([defaultValue]);
return;
} else {
/**/ }
value.splice(0, value.length);
if (needSelectAll) {
if (defaultValue.length === defaultOptions.length && defaultOptions.length > 0) {
value.push(selectAllValue);
} else {
const selectAllIndex = value.indexOf(selectAllValue);
if (selectAllIndex >= 0) {
value.splice(selectAllIndex, 1);
} else {
/**/ }
}
} else {
/**/ }
value.push(...defaultValue);
}
}
};
3.解析
- Tooltip 文字提示 用来悬浮多选折叠提示，并设置无值时不需要提示处理。
- 在组件初始化和监听传参
defaultValue变化时调用initData初始化数据。 - 当选择组件数据切换时调用
selectChange完善数据全选和取消全选。 - 通过调用
updateVal方法出发异步数据defaultValue更新，并按需传递change事件。
4. 具体使用
<template>
<SelectMultibleAll
:default-value.sync="value"
:default-options="options"
:placeholder="请选择"
:need-select-all="needSelectAll"
:disabled="disabled"
@change="selectChange"
/>
</template>
<script>
import SelectMultibleAll from '@/components/SelectMultibleAll.vue';
export default {
components: {
SelectMultibleAll },
data() {
return {
value: [],
options: [
{
label: '选项1', value: '值1' },
{
label: '选项2', value: '值2' }
]，
needSelectAll: true,
disabled: false
}
},
methods: {
selectChange(val) {
console.log(val);
}
}
}
</script>
效果
代码下载