|
|
@@ -1,23 +1,9 @@
|
|
|
<template>
|
|
|
<main>
|
|
|
- <el-select
|
|
|
- ref="select"
|
|
|
- v-model="values"
|
|
|
- multiple
|
|
|
- style="width:100%"
|
|
|
- :placeholder=lang.pleaseSelect3
|
|
|
- @change="handleChange"
|
|
|
- @remove-tag="removeTag"
|
|
|
- class="tagS"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- class="tagOption"
|
|
|
- v-for="item in options"
|
|
|
- :key="item.id"
|
|
|
- :disabled="disabled && item.id === Number(judgingCondition)"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
+ <el-select ref="select" v-model="values" multiple style="width:100%" :placeholder=lang.pleaseSelect3
|
|
|
+ @change="handleChange" @remove-tag="removeTag" class="tagS">
|
|
|
+ <el-option class="tagOption" v-for="item in options" :key="item.id"
|
|
|
+ :disabled="disabled && item.id === Number(judgingCondition)" :label="item.name" :value="item.id" />
|
|
|
</el-select>
|
|
|
</main>
|
|
|
</template>
|
|
|
@@ -59,7 +45,7 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
/**
|
|
|
- * @description 获取当前选中的值
|
|
|
+ * @description 获取当前选中的值(过滤掉"全部班级",不显示在标签中)
|
|
|
*/
|
|
|
values: {
|
|
|
get() {
|
|
|
@@ -94,7 +80,7 @@ export default {
|
|
|
const callback = mutationsList => {
|
|
|
mutationsList.forEach(item => {
|
|
|
console.log(item);
|
|
|
-
|
|
|
+
|
|
|
if (item.type === 'childList') {
|
|
|
const tagList = item.target.childNodes;
|
|
|
let tagWidth = 0;
|
|
|
@@ -137,7 +123,42 @@ export default {
|
|
|
/**
|
|
|
* @description 选择框改变
|
|
|
*/
|
|
|
- handleChange() {
|
|
|
+ handleChange(val) {
|
|
|
+ const hasallGrades = this.options.some(item => item.id === '');
|
|
|
+ if (hasallGrades) {
|
|
|
+ // 获取所有班级的id(不包括"全部班级")
|
|
|
+ const allGradesIds = this.options.filter(item => item.id || item.name === this.lang.allGrades).map(item => item.id);
|
|
|
+ const allGradesIds2 = this.options.filter(item => item.id).map(item => item.id);
|
|
|
+ const allGradesIndex = val.indexOf('');
|
|
|
+
|
|
|
+ // 检查当前是否已经是全选状态
|
|
|
+ const isAllSelected = allGradesIds2.every(id => val.includes(id));
|
|
|
+
|
|
|
+ const diff = val.filter(id => !this.value.includes(id)).concat(this.value.filter(id => !val.includes(id)));
|
|
|
+
|
|
|
+ if (allGradesIndex !== -1) {
|
|
|
+ if (isAllSelected) {
|
|
|
+ // 如果已经是全选状态,再点击"全部班级"则取消全选
|
|
|
+ this.values = [];
|
|
|
+ } else if (!isAllSelected && diff.length > 0 && !diff.includes('')) {
|
|
|
+ this.values = val.filter(id => id !== '');
|
|
|
+ } else {
|
|
|
+ // 如果选择了"全部班级"且不是全选状态,则自动选中所有班级
|
|
|
+ this.values = allGradesIds;
|
|
|
+ }
|
|
|
+ } else if (diff.includes('') && isAllSelected) {
|
|
|
+ // 如果是全选状态,则自动取消"全部班级"选中
|
|
|
+ this.values = [];
|
|
|
+ } else {
|
|
|
+ // 检查是否所有班级都被选中
|
|
|
+ const allSelected = allGradesIds2.every(id => val.includes(id));
|
|
|
+ if (allSelected && allGradesIds2.length > 0) {
|
|
|
+ // 如果所有班级都被选中,自动选中"全部班级"
|
|
|
+ this.values = ['', ...allGradesIds2];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
this.$emit('change', this.value);
|
|
|
},
|
|
|
/**
|
|
|
@@ -151,7 +172,7 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
-.tagS >>> .el-input__inner:focus {
|
|
|
+.tagS>>>.el-input__inner:focus {
|
|
|
border-color: #ef9e28;
|
|
|
}
|
|
|
</style>
|