在 Vue 中设置所选值的样式 Select

Question

我正在使用 vue select。在下拉列表中，有标签（不仅是文本）。 selected 值是否也有标签？

                            <div class="form-group row">
                                <label for="project_status_id"  class="col-sm-3 col-form-label">Projekt Status</label>
                                <div class="col-sm-9">
                                    <v-select  :options="resources.activeProjectStatus" :reduce="project_status_id => project_status_id.id"  v-model="form.project_status_id" label="name" id="project_status_id" placeholder="Projekt Status" :class="$vSelectStyle($v.form.project_status_id)">
                                        <template v-slot:option="option" >
                                            <div v-html="option.status_label" class="mb-1">
                                            </div>
                                        </template>
                                    </v-select>
                                    <template v-if="$v.form.project_status_id.$error">
                                        <p class="text-danger" v-if="!$v.form.project_status_id.required">
                                            Projekt - Status ist erforderlich!
                                        </p>
                                    </template>
                                </div>
                            </div>

Answer 1

假设您想要 status_label 的 HTML，还假设 status_label 是模板字符串或类似字符串，然后使用带有插槽内容的 selected-option 插槽与没有附加 class 的选项槽相同。

如前所述，下面示例中的关键部分是 selected-option 插槽：

<!-- Using OP's `option` key -->
<template v-slot:selected-option="option">
  <div v-html="option.status_label"></div>
</template>

下面的示例是 Vue-Select's Codepen example 的分支，对答案进行了修改。

Vue.config.productionTip = false;
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
  el: '#app',
  data: {
    options: [
      {
        name: `<span style="padding: 4px; background: green; border-radius: 0.25rem; color: white;">Foo</span>`
      },
      {
        name: `<span style="padding: 4px; background: orange; border-radius: 0.25rem; color: white;">Bar</span>`
      },
      {
        name: `<span style="padding: 4px; background: red; border-radius: 0.25rem; color: white;">Baz</span>`
      }
    ]
  }
});

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600">

<div id="app">
  <h1>Vue Select</h1>
  <v-select :options="options" label="label">
    <template v-slot:option="option" >
      <div v-html="option.name" style="padding: 2px 0;"></div>
    </template>
    <template v-slot:selected-option="option">
      <div v-html="option.name"></div>
    </template>
  </v-select>
</div>

在 Vue 中设置所选值的样式 Select

Styling selected value in Vue Select

vue.js

vue-select