vuetify v-select 显示长字符串答案

【问题标题】：vuetify v-select show long stringsvuetify v-select 显示长字符串
【发布时间】：2020-08-23 00:48:34
【问题描述】：

我正在制作一个表单，其中包含带有长字符串项目的 v-select 控件，例如

要显示头部的长字符串项
显示手牌的长字符串项目

等等。

v-select 控件将通过手机显示，因此用户应该阅读每个项目，而不是以下

长字符串项目...
长字符串项目...

是否有一个选项可以将完整的项目文本显示到列表项中？

properties: {
    slotProps: {
      type: "string",
      title: "Custom enums",
      enum: [
        'long string item to display in devices with small screens and Head',
        'long string item to display in devices with small screens and Hands',
        'long string item to display in devices with small screens and Eyes',
        'long string item to display in devices with small screens and Stomach',],
    },
    }

以下是一些屏幕截图：

【问题讨论】：

你能用一个例子解释一下你想要实现的目标吗？另外，如果你可以为上述问题创建一个代码笔。这对更快地解决您的问题非常有帮助

标签： string vuetify.js long-integer v-select

【解决方案1】：

直接给槽内的物品。这将删除文本截断。

<v-select
  v-model="select"
  :items="items"
  label="Select"
  >
  <template v-slot:item="slotProps">
    {{slotProps.item}}
  </template>
</v-select>

...
...
data: {
  select: null,
  items: [
    'long string item to display Head',
    'long string item to display Hands',
    'long string item to display Eyes',
    'long string item to display Stomach',
   ],
}

【讨论】：