javascript - vuejs element ui - 在 el-select 中添加 html

Question

我有以下下拉列表：

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:

我怎样才能做到这一点？

标签： javascriptvue.jselement-ui

Answer 1

不幸的是，该el-select组件没有suffix插槽。作为一种解决方法，您可以使用prefix插槽并调整 CSS 以使其位于右侧。

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>