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:
How can I achieve this ?
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>