element 下拉框、级联组件更改回显样式

前言

需求： 选中select选项时，回显框中加上tag标签。本文以添加tag标签为例，如果想要换成其他的样式或者自定义都是同样格式更改。

实现过程

下拉框如何添加tag标签

需要在选中级联标签时，输入框加上一个tag标签的样式。element中的select组件是可以直接加上tag标签的 如图所示，ps:还是要修改一下添加样式的

<el-select v-model="value" clearable placeholder="请选择">
     <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>

select 文档中有prefix这个组件头部内容插槽，所以可以直接添加使用即可。

效果如图

级联组件

如果点开饿了么源码就会发现级联组件源码中是没有prefix的插槽在里面,所以我们只需要在源码的对应的位置加上名为prefix的插槽即可

更改源码

<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">
  // 就是这个位置 start
  <template slot="prefix" 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>

使用方式跟下拉框的组件一致。

使用一些组件时候难免经常会遇到与需求不符合的情况，如果自己实现一个又比较复杂，改源码也许更简单