<template> <div class="allselect"> <el-select v-model="bindValue" size="small" multiple collapse-tags filterable clearable :placeholder="placeholder" > <el-option style="padding: 0" value="all"> <span class="option" @click.stop="setAll">{{ allFlag }}</span> </el-option> <el-option v-for="item in options" :key="valueCompute(item)" :label="labelCompute(item)" :value="valueCompute(item)" ></el-option> </el-select> </div> </template> <script> export default { props: { value: { type: Array, default: () => [] }, placeholder: { type: }, options: {type: Array, default: () => []}, labelKey: {type: String, default: "please select"}, options: {type: Array, default: () => []}, labelKey: {type: String, default: "" }, valueKey: { type: String, default: "" }, multipleLimit: { type: Number, default: 0 } }, computed: { valueCompute() { return (item) => { if (this.valueKey) { return item[this.valueKey] } else { return item } } }, labelCompute() { return (item) => { if (this.labelKey) { return item[this.labelKey] } else { return item } } } }, watch: {bindValue(val) {if (val.length === 0) {this.allFlag = "all"} if (val.length === this.options.length) {this.allflag $emit("input", val)}}, data() {return {bindValue: this.value, allFlag: "this.value ", methods: $emit("input", val)}, data() {return {bindValue: this.value, allFlag:" this.value "}, methods: {setAll() {if (this.allFlag === "all ") {this.allflag =" none "this.bindValue = this.valueKey? this.options.map((item) => item[this.valueKey]) : This. options} else {this.allFlag =" all selected "this.bindValue = []}}}} </script> <style lang=" SCSS" scoped>. margin: 20px; } .option { user-select: none; display: inline-block; width: 100%; font-size: 14px; padding: 0 20px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #606266; height: 34px; line-height: 34px; box-sizing: border-box; cursor: pointer; &:hover { background: #f5f7fa; } } ::v-deep .el-select__tags-text { display: inline-block; max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::v-deep .el-tag.el-tag--info .el-tag__close { top: -5px; right: -4px; } ::v-deep.el-select-dropdown__item { max-width: 305px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &::after { right: 10px ! important; } } </style>Copy the code