Vue 元素 UI - html inside <el-select>

Question

我想为每个条目实现一个具有不同颜色标签的 select 元素：

我的代码如下所示：

var Main = {
  data() {
    return {
      selectedState: null,
      processStates: [
        {
          value: 0,
          label: 'New',
          color: 'ffffff'
        },
        {
          value: 1,
          label: 'Ready',
          color: 'ff9933'
        },
        {
          value: 2,
          label: 'Running',
          color: '008000'
        },
        {
          value: 3,
          label: 'Rejected',
          color: 'cc0000'
        },
        {
          value: 4,
          label: 'Terminated',
          color: '2E9AFE'
        }
      ]
    }
  },
  
   methods: {}
}

var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');

@import url("//unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css");

<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="selectedState" style="width:200px">
      <el-option
        v-for="state in processStates"
        :key="state.value"
        :label="state.label"
        :value="state.value"
      >
        <span>
          <el-tag :style="'background-color:#' + state.color">&nbsp;</el-tag> {{ state.label }}
        </span>
      </el-option>
    </el-select>
</div>

如您所见，我设法将 html 注入到选项标签中并获得了预期的结果。
但是，当一个选项是 selected 时，我希望有相同的 html。

想要的结果：

知道如何实现吗？

Answer 1

您必须为此使用 prefix 插槽。如下所示，我也将 selectedState 更改为一个对象，但是您仍然可以使用 string 值，但是您必须进行查找才能获得颜色

var Main = {
  data() {
    return {
      selectedState: { color: 'ffffff'},
      processStates: [
        {
          value: 0,
          label: 'New',
          color: 'ffffff'
        },
        {
          value: 1,
          label: 'Ready',
          color: 'ff9933'
        },
        {
          value: 2,
          label: 'Running',
          color: '008000'
        },
        {
          value: 3,
          label: 'Rejected',
          color: 'cc0000'
        },
        {
          value: 4,
          label: 'Terminated',
          color: '2E9AFE'
        }
      ]
    }
  },
  
   methods: {}
}

var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');

@import url("//unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css");

.el-input--prefix .el-input__inner { 
  padding-left: 40px;
}

<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="selectedState" value-key="value" style="width:200px">
  <template slot="prefix">
    <el-tag class="prefix" :style="`background-color: #${selectedState.color}`"/>
  </template>
  <el-option
    v-for="state in processStates"
    :key="state.value"
    :label="state.label"
    :value="state"
  >
    <span>
      <el-tag :style="'background-color:#' + state.color">&nbsp;</el-tag> {{ state.label }}
    </span>
  </el-option>
</el-select>
</div>

Vue 元素 UI - html inside <el-select>

Vue Element UI - html inside <el-select>

vuejs2

element-ui