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

这篇具有很好参考价值的文章主要介绍了把树状数组在页面显示成‘/‘/‘形式,并搜索想要的值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大概思路

在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()去除数组中的空元素（这里因前后都有"/"，所以会出现空字符串元素），最后通过数组索引获取最后一个元素。文章来源地址https://www.toymoban.com/news/detail-794038.html

到了这里，关于把树状数组在页面显示成‘/‘/‘形式,并搜索想要的值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！