|
@@ -1,52 +1,93 @@
|
|
<template>
|
|
<template>
|
|
- <div class="select-all">
|
|
|
|
- <el-select
|
|
|
|
- multiple
|
|
|
|
- clearable
|
|
|
|
- filterable
|
|
|
|
- collapse-tags
|
|
|
|
- class="select"
|
|
|
|
- v-bind="{...$attrs, ...$props}"
|
|
|
|
- v-on:input="value => $emit('input', value)"
|
|
|
|
- ref="select"
|
|
|
|
|
|
+ <div>
|
|
|
|
+ <el-tooltip
|
|
|
|
+ v-if="isShow"
|
|
|
|
+ class="item"
|
|
|
|
+ effect="dark"
|
|
|
|
+ :content="labelStr"
|
|
|
|
+ placement="top"
|
|
|
|
+ ref="tooltip"
|
|
>
|
|
>
|
|
- <slot/>
|
|
|
|
- </el-select>
|
|
|
|
- <el-button @click="selectAll" class="btn">
|
|
|
|
- 全选
|
|
|
|
- </el-button>
|
|
|
|
|
|
+ <div class="showDev"></div>
|
|
|
|
+ </el-tooltip>
|
|
|
|
+ <div class="select-all">
|
|
|
|
+ <el-select
|
|
|
|
+ multiple
|
|
|
|
+ clearable
|
|
|
|
+ filterable
|
|
|
|
+ collapse-tags
|
|
|
|
+ class="select"
|
|
|
|
+ v-bind="{ ...$attrs, ...$props }"
|
|
|
|
+ v-on:input="(value) => $emit('input', value)"
|
|
|
|
+ ref="select"
|
|
|
|
+ >
|
|
|
|
+ <slot />
|
|
|
|
+ </el-select>
|
|
|
|
+ <el-button @click="selectAll" class="btn" v-bind="{ ...$attrs }">
|
|
|
|
+ 全选
|
|
|
|
+ </el-button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
export default {
|
|
export default {
|
|
- name: 'select-all',
|
|
|
|
|
|
+ name: "select-all",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ labelStr: "",
|
|
|
|
+ isShow: false,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
mounted() {
|
|
mounted() {
|
|
- console.log(this)
|
|
|
|
|
|
+ this.isShow = this.$refs?.select?.disabled || false;
|
|
|
|
+ console.log(this.$refs?.select?.disabled);
|
|
|
|
+ const { selected } = this.$refs.select;
|
|
|
|
+ this.labelStr = selected.map((item) => item.label).join(",");
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
selectAll() {
|
|
selectAll() {
|
|
- const { options } = this.$refs.select
|
|
|
|
- const values = options.filter(item => !item.disabled && item.value).map(item => item.value)
|
|
|
|
- this.$emit('input', values)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ const { options } = this.$refs.select;
|
|
|
|
+ const values = options
|
|
|
|
+ .filter((item) => !item.disabled && item.value)
|
|
|
|
+ .map((item) => item.value);
|
|
|
|
+ this.$emit("input", values);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
+<style lang="scss">
|
|
|
|
+.el-tooltip__popper {
|
|
|
|
+ max-width: 300px;
|
|
|
|
+ line-height: 180%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+</style>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
-.select-all{
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+.select-all {
|
|
display: flex;
|
|
display: flex;
|
|
- .select{
|
|
|
|
|
|
+ .select {
|
|
flex: 1;
|
|
flex: 1;
|
|
- /deep/ .el-input__inner{
|
|
|
|
|
|
+ /deep/ .el-input__inner {
|
|
border-radius: 4px 0 0 4px;
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-.btn{
|
|
|
|
|
|
+.btn {
|
|
width: 50px;
|
|
width: 50px;
|
|
padding: 0 10px;
|
|
padding: 0 10px;
|
|
border-left: none;
|
|
border-left: none;
|
|
border-radius: 0 4px 4px 0;
|
|
border-radius: 0 4px 4px 0;
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+.item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 1000;
|
|
height: 40px;
|
|
height: 40px;
|
|
|
|
+ .showDev {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|