Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

258
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!