Vuetify 下拉列表中轻松修改项标题文本的秘诀

2024-03-25 19:48:27

Vuetify 下拉列表中修改项标题文本的终极指南

简介

使用 Vuetify 的下拉列表时，有时需要在 item-title 中显示修改后的数据成员值。虽然 Vuetify 不直接提供自定义模板，但使用一些技巧，可以轻松实现此目的。

计算属性方法

第一步：创建计算属性

创建计算属性，该属性修改 :items 数组中相应对象的值：

computed: {
  modifiedResource() {
    return this.permissionsToCopy.map((permission) => {
      if (permission.resource === 'company_user_licence') {
        return { ...permission, resource: 'Licence Permission: User' };
      }
      return permission;
    });
  }
}

第二步：在 v-select 中使用计算属性

然后，在 v-select 组件中使用计算属性作为 item-title：

<v-select 
    label="Select a permission to copy"
    variant="underlined"
    item-title="modifiedResource"
    no-data-text="No permission to choose from"
    :items="permissionsToCopy"
    v-model="selectedPermissionToCopy"
    return-object
>
</v-select>

新数组方法

第一步：创建新数组

如果您更喜欢使用新数组，可以将修改后的值映射到一个新数组中：

const modifiedPermissions = this.permissionsToCopy.map((permission) => {
  if (permission.resource === 'company_user_licence') {
    return { ...permission, resource: 'Licence Permission: User' };
  }
  return permission;
});

第二步：在 v-select 中使用新数组

然后，在 v-select 组件中使用新数组作为 :items：

<v-select 
    label="Select a permission to copy"
    variant="underlined"
    item-title="resource"
    no-data-text="No permission to choose from"
    :items="modifiedPermissions"
    v-model="selectedPermissionToCopy"
    return-object
>
</v-select>