Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

259
Visualizações
vuejs element ui - add html inside el-select

I have the following dropdown :

var Main = {
  data() {
    return {
      drawer: {
        form: {
          period: null
        }
      },
      data : [
        {
          label: "JAN to MAR 2021",
          value: "1",
          current: true
        }, {
          label: "Apr to Jun 2021",
          value: "2",
          current: false
        }, {
          label: "Jul to Sep 2021",
          value: "3",
          current: false
        }, {
          label: "Oct to Dec 2021",
          value: "4",
          current: false
        }
      ]
    }
  },
  
   methods: {}
}

var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');
@import url("//unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css");


.capsule {
    background: #e6e9f0;
    border-radius: 7.5px;
    height: 15px;
    line-height: 15px!important;
    color: #04246a;
    font-size: 10px;
    text-align: center;
    display: inline-block;
    padding: 0 6px;
    letter-spacing: .5px;
    text-transform: uppercase;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: normal;
    word-wrap: normal;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>

<div id="app">
<el-select v-model="drawer.form.period" value-key="value">
            <el-option
              v-for="item in data"
              :key="item.value"
              :label="item.label"
              :value="item.value">

              <span>{{ item.label }}</span>
              <div v-if="item.current" class="capsule secondary" >Current</div> 

            </el-option>
            <template slot="suffix">
              <div class="suffix capsule secondary">Current</div>
            </template>
          </el-select>
</div>

I want when the item with current=true is selected to also show the current tag inside the dropdown, like following:

enter image description here

How can I achieve this ?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Unfortunately, the el-select component does not have a suffix slot. As a workaround, you can use the prefix slot and adjust the CSS so that it is positioned on the right.

var Main = {
  data() {
    return {
      drawer: {
        form: {
          period: null
        }
      },
      data : [
        {
          label: "JAN to MAR 2021",
          value: "1",
          current: true
        }, {
          label: "Apr to Jun 2021",
          value: "2",
          current: false
        }, {
          label: "Jul to Sep 2021",
          value: "3",
          current: false
        }, {
          label: "Oct to Dec 2021",
          value: "4",
          current: false
        }
      ]
    }
  },
  
  computed: {
    isCurrent() {
      return this.data.find(item => item.value === this.drawer.form.period)?.current;
    }
  },
  
  methods: {}
}

var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');
@import url("//unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css");


.capsule {
    background: #e6e9f0;
    border-radius: 7.5px;
    height: 15px;
    line-height: 15px!important;
    color: #04246a;
    font-size: 10px;
    text-align: center;
    display: inline-block;
    padding: 0 6px;
    letter-spacing: .5px;
    text-transform: uppercase;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: normal;
    word-wrap: normal;
}

.el-input--prefix .el-input__inner {
  padding-left: 15px;
  padding-right: 60px;
}

.el-input__prefix {
  right: 25px;
  left: initial;
  
  display: flex;
  align-items: center;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>

<div id="app">
<el-select v-model="drawer.form.period" value-key="value">
            <el-option
              v-for="item in data"
              :key="item.value"
              :label="item.label"
              :value="item.value">

              <span>{{ item.label }}</span>
              <div v-if="item.current" class="capsule secondary" >Current</div> 

            </el-option>
            <template slot="prefix">
              <div v-if="isCurrent" class="suffix capsule secondary">Current</div>
              
            </template>
          </el-select>
</div>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda