vuetify v-select 多个文本值

Question

我正在尝试在 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 的默认行为。（筹码，在多个 select 上显示复选框...

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

提前致谢。抱歉初学者问题。

Answer 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}`
  }
}

vuetify v-select 多个文本值

vuetify v-select multiple text values

vue.js

vuetify.js

v-select