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

大概思路

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

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

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

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

<template>
  <ul>
    <li v-for="item in filePaths" :key="item.id">{{ item.path }}</li>
  </ul>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  props: {
    treeData: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    // 创建一个ref来存储转换后的路径数组
    const filePaths = ref([]);

    // 计算属性或生命周期钩子中处理树形数据
    function flattenTree(node, path = '') {
      let newPath = `${path}/${node.name}`;

      // 将带有路径的节点加入数组
      filePaths.value.push({ id: node.id || node.name, path: newPath });

      // 如果有子节点，则递归处理
      if (Array.isArray(node.children)) {
        node.children.forEach(child => {
          flattenTree(child, newPath);
        });
      }
    }

    // 遍历并处理原始树形数据
    props.treeData.forEach(rootNode => {
      flattenTree(rootNode);
    });

    // 返回filePath以便在模板中使用
    return {
      filePaths,
    };
  },
};
</script>

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

简写

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

<template>
  <div>
    <ul>
      <li v-for="item in displayedFilePaths" :key="item.id">{{ item.path }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 假设这是从外部获取或props传递过来的树状数据
const treeData = ref([
  {
    id: 'root',
    name: 'root',
    children: [
      {
        id: 'folder1',
        name: 'folder1',
        children: [
          { id: 'file1', name: 'file1' },
          { id: 'file2', name: 'file2' },
        ],
      },
      {
        id: 'folder2',
        name: 'folder2',
        children: [
          { id: 'file3', name: 'file3' },
        ],
      },
    ],
  },
]);

// 存储转换后的路径数组
const displayedFilePaths = ref([]);

// 用于处理树形数据的方法
function flattenTree(node, path = '/') {
  const newPath = `${path}/${node.name}`;

  displayedFilePaths.value.push({ id: node.id, path: newPath });

  if (Array.isArray(node.children)) {
    node.children.forEach(child => {
      flattenTree(child, newPath);
    });
  }
}

// 在组件挂载后执行处理函数
onMounted(() => {
  treeData.value.forEach(node => {
    flattenTree(node);
  });
});
</script>

在这个例子中，我们使用了Vue3的?<script setup>?特性来简化组件脚本部分。首先，我们定义了一个名为?treeData?的响应式引用，并在组件挂载时遍历它，调用?flattenTree?方法将树状结构转换为包含路径的?displayedFilePaths?数组。然后在模板中通过?v-for?循环展示这些路径。请注意，这里假设每个节点都有一个唯一的?id?属性，实际应用中请按实际情况调整字段名。

往flattenTree传入一个值，那这值跟最后一个节点比，显示出含这值的

如果要在flattenTree函数中传入一个值，然后找到并显示包含该值的路径，可以修改flattenTree函数使其返回包含目标值的路径数组。下面是如何修改Vue3组件以实现这一需求

<template>
  <div>
    <ul>
      <li v-if="matchedPaths.length > 0" v-for="item in matchedPaths" :key="item.id">{{ item.path }}</li>
      <p v-else>未找到与{{ searchValue }}匹配的路径</p>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const treeData = ref([...]); // 你的树状数据
const searchValue = ref(''); // 搜索值
const matchedPaths = ref([]); // 匹配的路径

function flattenTree(node, path = '/', matchedList = []) {
  const newPath = `${path}/${node.name}`;

  // 如果节点名字包含了搜索值，将路径添加到匹配列表
  if (node.name.includes(searchValue.value)) {
    matchedList.push({ id: node.id, path: newPath });
  }

  if (Array.isArray(node.children)) {
    node.children.forEach(child => {
      flattenTree(child, newPath, matchedList);
    });
  }

  // 返回匹配列表
  return matchedList;
}

onMounted(() => {
  // 当搜索值改变时，更新匹配的路径
  searchValue.value = '你要搜索的值'; // 替换为实际的搜索值
  matchedPaths.value = flattenTree(treeData.value[0]);
});

// 如果需要实时搜索，可以监听searchValue的变化
watch(searchValue, newValue => {
  matchedPaths.value = flattenTree(treeData.value[0]);
});
</script>

现在，当向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()去除数组中的空元素（这里因前后都有"/"，所以会出现空字符串元素），最后通过数组索引获取最后一个元素。