I am working with a dropdown feature that has various options:
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/my-custom-theme.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/custom-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 would like to enhance the dropdown functionality by displaying a special tag when an item with 'current' property set to true is selected, similar to this concept:
What is the best approach to achieve this? Thank you!