vuetify v-选择多个文本值

Posted 2023-02-22

【中文标题】vuetify v-选择多个文本值

【英文标题】：vuetify v-select multiple text values

【发布时间】：2020-08-14 12:08:52

【问题描述】：

我正在尝试在 v-select 中设置多个文本项。 目前这是我的 v-select，它与一个：item-text 一起工作。 但我需要显示两个字段。所以我正在检查文档并尝试使用插槽。

<v-select
            :disabled="isReadOnly()"
            v-show="!isHidden()"
            :label="getLabel()"
            :hint="field.description"
            :items="selectVal"


            :item-value="field.options.select.ValueField"
            :item-text="field.options.select.TextField"

            :multiple="isType(FieldType.ManyToMany)"
            :chips="isType(FieldType.ManyToMany)"

            v-model="fieldValue"
            :rules=rules()
            return-object
    >
    </v-select>

但是当我这样做时：

     <template slot="selection" slot-scope="data">
                 data.item.name  -  data.item.description 
            </template>
            <template slot="item" slot-scope="data">
                 data.item.name  -  data.item.description 
            </template>

必须重新实现 v-select 的默认行为。 （芯片，在多选时显示复选框......

还有其他方法吗？没有复制默认行为并且有重复的代码来完成这个简单的任务？

提前致谢。 对不起初学者的问题。

【参考方案1】：

item-text 也可以是一个函数，所以你可以做这样的事情

<v-select
            :disabled="isReadOnly()"
            v-show="!isHidden()"
            :label="getLabel()"
            :hint="field.description"
            :items="selectVal"


            :item-value="field.options.select.ValueField"
            :item-text="getFieldText"

            :multiple="isType(FieldType.ManyToMany)"
            :chips="isType(FieldType.ManyToMany)"

            v-model="fieldValue"
            :rules=rules()
            return-object
    >
    </v-select>

methods:

  getFieldText (item)
  
    return `$item.name - $item.description`