|
@@ -9,6 +9,15 @@
|
|
|
@change="handleChange"
|
|
|
@remove-tag="removeTag"
|
|
|
>
|
|
|
+ <!-- 全选项 -->
|
|
|
+ <el-option
|
|
|
+ key="select-all"
|
|
|
+ :label="options.length == values.length ? '取消全选': '全选'"
|
|
|
+ :value="selectAllValue"
|
|
|
+ :disabled="disabled"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 其他选项 -->
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
|
:key="item.id"
|
|
@@ -19,31 +28,29 @@
|
|
|
</el-select>
|
|
|
</main>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
+import { values } from 'lodash';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'select-tags',
|
|
|
props: {
|
|
|
- // 选项
|
|
|
options: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
- // 选中的值
|
|
|
value: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
- // 提示
|
|
|
placeholder: {
|
|
|
type: String,
|
|
|
default: '请选择'
|
|
|
},
|
|
|
- // 是否禁用
|
|
|
disabled: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- // 判断条件
|
|
|
judgingCondition: {
|
|
|
type: String | Number,
|
|
|
default: ''
|
|
@@ -52,19 +59,27 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
observer: null,
|
|
|
- hideDom: null
|
|
|
+ hideDom: null,
|
|
|
+ selectAllValue: 'select-all', // 用于标识“全选”选项
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- /**
|
|
|
- * @description 获取当前选中的值
|
|
|
- */
|
|
|
values: {
|
|
|
get() {
|
|
|
return this.value;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$emit('input', val);
|
|
|
+ // 优化全选和取消全选的逻辑
|
|
|
+ const isSelectAll = val.includes(this.selectAllValue);
|
|
|
+ const filteredVal = val.filter(item => item !== this.selectAllValue);
|
|
|
+ const isAllSelected = filteredVal.length === this.options.length;
|
|
|
+ console.log(isSelectAll);
|
|
|
+
|
|
|
+ if (isSelectAll) {
|
|
|
+ this.$emit('input', isAllSelected ? [] : this.options.map(item => item.id)); // 全选或取消全选
|
|
|
+ } else {
|
|
|
+ this.$emit('input', val); // 普通选择
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -75,14 +90,10 @@ export default {
|
|
|
this.observer.disconnect();
|
|
|
},
|
|
|
methods: {
|
|
|
- /**
|
|
|
- * @description 监听tag变化
|
|
|
- */
|
|
|
mutationObserver() {
|
|
|
const tagLIstDom = this.$refs.select.$el.querySelector('.el-select__tags');
|
|
|
const tagSpanDom = this.$refs.select.$el.querySelector('.el-select__tags > span');
|
|
|
|
|
|
- // 创建隐藏的计数节点
|
|
|
this.hideDom = document.createElement('span');
|
|
|
this.hideDom.classList.add('count-node');
|
|
|
tagSpanDom.append(this.hideDom);
|
|
@@ -104,7 +115,7 @@ export default {
|
|
|
} else {
|
|
|
e.style.display = 'inline-block';
|
|
|
}
|
|
|
- tagWidth += e.offsetWidth + 5;
|
|
|
+ tagWidth += e.offsetWidth + 7;
|
|
|
|
|
|
if (tagWidth > tagLIstDom.offsetWidth) {
|
|
|
e.style.display = 'none';
|
|
@@ -130,22 +141,20 @@ export default {
|
|
|
this.observer = new MutationObserver(callback);
|
|
|
this.observer.observe(tagSpanDom, config);
|
|
|
},
|
|
|
- /**
|
|
|
- * @description 选择框改变
|
|
|
- */
|
|
|
handleChange() {
|
|
|
this.$emit('change', this.value);
|
|
|
},
|
|
|
- /**
|
|
|
- *
|
|
|
- * @param val 当前角色绑定的分校不允许删除
|
|
|
- */
|
|
|
removeTag(val) {
|
|
|
- this.$emit('remove-tag', val);
|
|
|
+ if (val === this.selectAllValue) {
|
|
|
+ // 取消全选时清空所有选择
|
|
|
+ this.$emit('input', []);
|
|
|
+ } else {
|
|
|
+ this.$emit('remove-tag', val);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-<style scoped>
|
|
|
|
|
|
-</style>
|
|
|
+<style scoped>
|
|
|
+</style>
|