V-选择多个自定义文本

Posted 2023-02-22

【中文标题】V-选择多个自定义文本

【英文标题】：V-select multiple with custom text

【发布时间】：2021-05-13 17:53:48

【问题描述】：

我正在尝试使用多个复选框填充 vuetify 1.5 中的 v-select 组件，然后问题是从它添加 <template slot='item' slot-scope=' item '></template> 时不会显示复选框，但没有它也能正常工作。知道为什么会这样吗？

代码

 <v-select
      label="Select Image"
      v-model="selectedRepoImage"
      :items="repoImages"
      item-text="name"
      item-value="repo_image_id"
      return-object
      :readonly="hasScanSchedId"
      multiple
  >
          <template slot='selection' slot-scope=' item '>
                   item.name : item.tag 
          </template>
          <template slot='item' slot-scope=' item '>
                   item.name : item.tag 
          </template>
  </v-select>

【问题讨论】：

因为您要覆盖默认的项目渲染 - 您需要在插槽中包含复选框。

【参考方案1】：

我做了以下，看起来类似于 v-select 的默认功能。

<v-select
    label="My Selections"
    v-model="myobject.items"
    :items="allitems"
    multiple>
    <template v-slot:item="item">
        <v-icon 
            v-if="myobject.items !== null && myobject.items.includes(item.value)" 
            color="primary" 
            class="mr-3">
            mdi-checkbox-marked
        </v-icon>
        <v-icon v-else class="mr-3">
            mdi-checkbox-blank-outline
        </v-icon>
        item.text  item.value 
    </template>
</v-select>

【参考方案2】：

试试这个

<v-select
  label="Options"
  multiple
  v-model="selected"
  :items="items">
  <template
    v-slot:item=" item, on, attrs ">
    <h1
      v-bind="attrs" style="width: 100%;">
      <v-switch
       :value="selected.includes(item.value)"
        style="display: inline-block"/>
       item.text 
    </h1>
  </template>
</v-select>

<script>
export default 
  data() 
    return 
      selected: [],
      items: [ text: 'A', value: 'a',  text: 'B', value: 'b']
    
  

</script>