首页 > 解决方案 > 过滤自定义 JSON

问题描述

我有这个 JSON

const Menu = [{
    icon: "home",
    text: "Inicio",
    url: {
        name: "home"
    },
    typeUrl: "exact"
},
{
    heading: "Operaciones"
},
{
    icon: "settings",
    "icon-alt": "settings",
    text: "Operación",
    model: true,
    children: [{
        icon: "add",
        text: "Cargar Pedidos",
        url: {
            name: "cargarpedidos"
        }
    },
    {
        icon: "playlist_add_check",
        text: "Aprobar Pedidos"
    },
    {
        icon: "content_copy",
        text: "Remitir Pedidos"
    }
    ]
},
{
    heading: "Informes"
},
{
    icon: "widgets",
    "icon-alt": "widgets",
    text: "Informe",
    model: false,
    children: [{
        icon: "view_module",
        text: "Usuarios"
    },
    {
        icon: "view_module",
        text: "Perfiles"
    },
    {
        icon: "view_module",
        text: "Permisos Perfiles"
    },
    {
        icon: "view_module",
        text: "Resetear Password"
    },
    {
        icon: "view_module",
        text: "Cambiar Password"
    }
    ]
},
{
    heading: "APSI"
},
{
    icon: "view_module",
    text: "Informes del APSI"
},
{
    heading: "Administaciones"
},
{
    icon: "extension",
    "icon-alt": "extension",
    text: "Administración",
    model: false,
    children: [{
        icon: "face",
        text: "Usuarios"
    },
    {
        icon: "assignment_ind",
        text: "Perfiles"
    },
    {
        icon: "settings",
        text: "Permisos Perfiles"
    },
    {
        icon: "cached",
        text: "Resetear Password"
    },
    {
        icon: "fingerprint",
        text: "Cambiar Password"
    }
    ]
},
{
    heading: "Mantenimientos"
},
{
    icon: "build",
    "icon-alt": "build",
    text: "Mantenimiento",
    model: true,
    children: [{
        icon: "group_work",
        text: "Departamentos"
    },
    {
        icon: "room",
        text: "Locales"
    },
    {
        icon: "donut_large",
        text: "Unidades de Medida"
    },
    {
        icon: "spellcheck",
        text: "Articulos"
    },
    {
        icon: "toc",
        text: "Categorías"
    },
    {
        icon: "supervisor_account",
        text: "Usuario Aprobador"
    }
    ]
}
];

export default Menu;

我用它来创建我正在使用 VueJS + Vuetify 开发的系统菜单,我需要通过“文本”字段通过包含它的单词过滤它,无论位置如何,采用 ​​SQL 的样式,例如“%filter%” , 也不区分大小写。尽量不区分重音(不过这个已经很挑剔了,如果不行或者很麻烦可以跳过)。

同样,如果重合模式在子节点中而不在父亲中,这个父亲是否也必须出现在过滤器中,是否可以使用 Javascript 函数来做到这一点?

菜单如下所示:

在此处输入图像描述

我期待这种行为

在此处输入图像描述

标签: javascriptjsonvue.jsfiltervuetify.js

解决方案


我不确定,但如果你想获得 text儿童领域,我认为应该这样做。您只需要使用空子数组初始化所有父母:

 tempArr = Menu.filter(function (elem) {
  return elem.children == null ;
}); 
 textFields = tempArr.map(({ text }) => text)

推荐阅读