把树状数组在页面显示成‘/‘/‘形式,并搜索想要的值

大概思路

在Vue中，若要将树状数组以类似于文件路径的形式（即“/”分隔）显示在页面上，可以按照以下步骤操作：

首先，假设您有一个树状数组，其结构可能如下所示：

const treeData = [
  {
    name: 'root',
    children: [
      {
        name: 'folder1',
        children: [
          { name: 'file1' },
          { name: 'file2' },
        ],
      },
      {
        name: 'folder2',
        children: [
          { name: 'file3' },
        ],
      },
    ],
  },
];

接下来，在Vue组件中，您可以编写一个计算属性或方法来递归地处理这个树形结构并将其转换为包含路径的扁平数组：

这段代码首先定义了一个计算属性 filePaths，然后通过 flattenTree 函数递归地遍历树状数组并将每条路径添加到 filePaths 中。最后，在模板中，我们通过 v-for 指令遍历 filePaths 并显示每一条路径。这样，在页面上就会看到以 '/' 分隔的路径形式展示了树状数组的内容。当然，请确保根据实际数据结构调整 name 和 children 字段名以及 id 或任何唯一键的生成逻辑。

简写

对于Vue3，我们可以使用Composition API来实现这个功能。以下是将树状数组转换为路径并在Vue3组件中展示的示例：

在这个例子中，我们使用了Vue3的 

现在，当向flattenTree函数传入搜索值时（这里是在onMounted期间初始化），它将返回包含目标值的路径数组。同时，通过watch侦听searchValue的变化，每当搜索值更改时，都会重新计算并显示匹配的路径。

拿到了/一/二/三 去除/变成数组拿到最后一个，拿最后一个去搜索想要的值

let str = "/一/二/三";

// 将字符串分割成数组
let arr = str.split('/');

// 去除首尾的空白字符串或特定字符（这里是"/"）
arr = arr.filter(item => item.trim());

// 获取最后一个元素
let lastElement = arr[arr.length - 1];

console.log(lastElement); // 输出："三"

这段代码首先使用split()方法按"/"将字符串分割成数组，然后使用filter()去除数组中的空元素（这里因前后都有"/"，所以会出现空字符串元素），最后通过数组索引获取最后一个元素。