el-select with button append | Element UI

Question

I need to add a button after select

This I have seen that they do with the input in the documentation enter link description here

Now I try to do it with the <el-select>

<el-select v-model="value" placeholder="Select">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

     <el-input placeholder="Please input" v-model="input2">
        <template slot="append">.com</template>
      </el-input>

enter link description here

I want to get to the image design

Could you guide me how I would do it, thanks

Answer 1

Wrapped select box inside el-complete's input-group style classes. Added class styles to hide arrow icon on select box and force highlight border-color on focus (el-input-group--append sets border-color: transparent).

element-ui wasn't really designed for this. This might possibly break in a newer version of element-ui.

var Main = {
  methods: {
    handleClick(e) {
      console.log('click', e.target.outerHTML)
    }
  },
  data() {
    return {
      options: [{
        value: 'Option1',
        label: 'Option1'
      }, {
        value: 'Option2',
        label: 'Option2'
      }, {
        value: 'Option3',
        label: 'Option3'
      }, {
        value: 'Option4',
        label: 'Option4'
      }, {
        value: 'Option5',
        label: 'Option5'
      }],
      value: ''
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.el-select .el-input.is-focus .el-input__inner {
  border-color: #409EFF!important;
}

.el-input.el-input-group.el-input-group--append .el-select .el-input__suffix {
  display: none;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <template>
  <div class="el-autocomplete">
    <div class="el-input el-input-group el-input-group--append">
    <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>
  <div class="el-input-group__append">
    <el-button icon="el-icon-search" @click="handleClick($event)"></el-button></div>
  </div>
  
  </div>

</template>
</div>

What you actually want though, most likely, is your another component.

Three possible approaches

1. Auto-complete component
   https://element.eleme.io/#/en-US/component/input#custom-template Add an event for the icon in slot suffix
2. Put a select and a button next to each other, and overlay. <div><el-select></el-select><el-button style="margin-left:-100%"></el-button></div>
3. Add a directive v-suffix attribute, that replaces the arrow button with a button (unfinished, but this is how you could implement it). Should probably use a slot to get the button from el-select children. Could also just replace the icon and add a click handler.

    var vueSelectBtn = {}
    vueSelectBtn.install = function(Vue, options){
      Vue.directive('suffix', {
        bind: function(el, binding, vnode) {
          var suffix = el.querySelector('.el-input__suffix-inner')
          new Vue({el:suffix,template:'<el-button @click="function(event){event.stopPropagation()}" style="margin-right:-10px!important;height:100%" icon="el-icon-search"></el-button>'})
        }
      })
    }
    Vue.use(vueSelectBtn)

Answer 2

create the following two css class

.el-input-start {
  .el-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.el-input-end {
  .el-input__inner {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    $color: var(--el-input-hover-border-color);
    box-shadow: -1px 0 0 0 $color, -1px 0 0 0 $color inset, 0 1px 0 0 $color inset, 0 -1px 0 0 $color inset !important;
  }
}

add el-input-start class to the el-select component, and add el-input-end to the el-input component.

these scss codes are copied from

@mixin inset-prepend-input-border($color) {
  box-shadow: 1px 0 0 0 $color inset, 1px 0 0 0 $color, 0 1px 0 0 $color inset,
0 -1px 0 0 $color inset !important;
}

@mixin inset-append-input-border($color) {
  box-shadow: -1px 0 0 0 $color, -1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
0 -1px 0 0 $color inset !important;
}

in element-plus/theme-chalk/src/input.scss