Because the business needs to use element multiple select component, but multiple select EL component, only the following two:

However, the product wants to display as much as possible in a single line, as many items as possible in the line, and only when exceeding the number of display, the specific effect is as follows:

Ok, without further ado, directly paste the component code:

/** * Select component, VMutipleSelect */ <template> <div class=" v-select "> <el-select V-model ="value" multiple placeholder=" placeholder" :size="size" @change="handleChange" :style="'width:' + width"> <el-option label=" all" value="all" @click.native="selectAll" v-if="isShowSelectAll"></el-option> <el-option v-for="item in list" :key="item[listValue]" :label="item[listLabel]" :value="item[listValue]"> </el-option> <template slot = "prefix"> <div class="max-tag"> <el-tag  v-for="tag in tags" :key="tag[listValue]" closable type="info" @close="removeTag(tag[listValue])" size="small">{{tag[listLabel]}}</el-tag> <span class="tag-length">{{tagsLength ? '+' + tagsLength : ''}}</span> </div> </template> </el-select> </div> </template> <script> export default { name: 'vMultipleSelect', data () { return { value: '', tags: [], tagsLength: '' }; }, props: {list: {// select dropdown data type: Array, default: () => []}, listValue: {// Select key, default value type: String, default: 'value'}, listLabel: {// Data display text key field, default label type: String, default: 'label'}, maxTag: }, size: {// Select size type: String, default: '2'}, size: {// Select size type: String, default: Type: Boolean, default: true}, width: {// select the width of type: String, default: '180px' } }, mounted () { }, methods: { removeTag (v) { this.value.splice(this.value.indexOf(v), 1); this.handleChange(this.value); }, handleChange (arr) { this.tags = []; for (let i = 0; i < this.list.length; i++) { if (this.tags.length === parseInt(this.maxTag)) break; if (arr.indexOf(this.list[i][this.listValue]) > -1) { this.tags.push(this.list[i]); } } this.tagsLength = this.value.length > this.tags.length ? this.value.length - this.tags.length : ''; this.$emit('getSelectValue', this.value); }, selectAll () { let valueLen = this.value.length; this.tags = []; this.value = []; if (valueLen === this.list.length + 1) { this.$emit('getSelectValue', this.value); this.tagsLength = ''; return; } for (let i = 0; i < this.list.length; i++) { if (i < parseInt(this.maxTag)) { this.tags.push(this.list[i]); } this.value.push(this.list[i][this.listValue]); } this.tagsLength = this.value.length > this.tags.length ? this.value.length - this.tags.length : ''; this.$emit('getSelectValue', this.value); }}}; </script> <style > .v-multiple-select { position: relative; display: flex; } .v-multiple-select .el-select { overflow: hidden; } .v-multiple-select .el-select__tags { display: none; } .v-multiple-select .max-tag { overflow: hidden; } .v-multiple-select .max-tag .el-tag.el-tag--info .el-tag__close { background-color: #C0C4CC; } .v-multiple-select .el-input--prefix .el-input__inner { padding-left: 15px; } .v-multiple-select .max-tag .tag-length { color: #ec7259; margin-left: 2px; } </style>Copy the code

Using components:

/ / <template> <div class="hello"> <v-multiple-select :list=options listValue='value' listLabel='label' maxTag='3' @getSelectValue="getSelectValue" width="200px" /> </div> </template> <script> import vMultipleSelect from './multipleSelect'; export default { name: 'HelloWorld', components: { vMultipleSelect }, data () { return { options: [{ value: '1', label: '1' }, { value: '2', label: '2' }, { value: '3', label: '3' }, { value: '4', label: '4' }, { value: '5', label: '5' }] } }, methods: { getSelectValue(v) { console.log(v); } } } </script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>Copy the code

This component can also automatically default the number of tags to be displayed based on the actual project select width. Get the width of the selected tag and compare it to the select. This can be extended later.