带有按钮附加的 el-select |元素用户界面

Question

我需要在选择后添加一个按钮

我已经看到他们对文档enter link description here中的输入进行了处理

现在我尝试使用<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

我想从事形象设计

你能指导我怎么做吗，谢谢

Answer 1

在el-complete 的输入组样式类中包装了选择框。添加了类样式以隐藏选择框上的箭头图标并强制突出显示边框颜色焦点（el-input-group--append 设置边框颜色：透明）。

element-ui 并不是为此而设计的。这可能会在更新版本的 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/element-ui@2.13.2/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/element-ui@2.13.2/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>

不过，您真正想要的很可能是您的另一个组件。

三种可能的方法

1. 自动完成组件
   https://element.eleme.io/#/en-US/component/input#custom-template 为插槽后缀中的图标添加事件
2. 将一个选择和一个按钮放在一起，然后叠加。 <div><el-select></el-select><el-button style="margin-left:-100%"></el-button></div>
3. 添加指令v-suffix 属性，将箭头按钮替换为按钮（未完成，但这是您可以实现它的方式）。可能应该使用slot 从 el-select 子项中获取按钮。也可以只替换图标并添加点击处理程序。

    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)