preface

Requirement: When the Select option is selected, a tag is added to the output box. This article takes adding a tag tag as an example. If you want to change it to another style or customize it, the same format changes.

The implementation process

How do I add a tag to the drop-down list

When selecting intermediate link tags, add a tag style to the input box. The select component of an Element can be added with a tag, as shown in the figure below

<el-select V-model ="value" clearable placeholder=" please select "> <template V-if ="value" slot="prefix"> <el-tag size="mini">{{111}}</el-tag> </template> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>Copy the code

The select document has a prefix header content slot, so you can just add it to it.

The effect is shown in figure

Level transmitte pieces

If you open the ele. me source code, you will find that there is no prefix slot in the cascading component source code, so we just need to add a slot named prefix in the corresponding position of the source code

Changes to the source

<Input ref="input" v-model="multiple ? presentText : inputValue" :size="realSize" :placeholder="placeholder" :readonly="readonly" :disabled="isDisabled" :validate-event="false" :class="{ 'is-focus': DropDownVisible}" @focus="handleFocus" @blur="handleBlur" @input="handleInput">  v-if="$slots.prefix"> <slot name="prefix"></slot> </template> // end <template slot="suffix"> <i v-if="clearBtnVisible"  key="clear" class="el-input__icon el-icon-circle-close" @click.stop="handleClear"></i> <i v-else key="arrow-down" :class="[ 'el-input__icon', 'el-icon-arrow-down', dropDownVisible && 'is-reverse' ]" @click.stop="toggleDropDownVisible()"></i> </template> </Input>Copy the code

Use the same method as the components in the drop-down box.

When using some components, it is inevitable that they often encounter situations that do not meet the requirements. If they implement one and it is more complex, it may be simpler to change the source code