对象数组按照指定rule对数据进行切割分层形成树形结构并支持搜索功能

根据提供的对象数组,按照rule: '5-3-3'的规则对数据进行分层,形成树形结构并支持搜索功能

数据:

dataList: [

{ id: '10000', name: 'a' },

{ id: '10000001', name: 'a1' },

{ id: '10000001001', name: 'a1c' },

{ id: '20000', name: 'b' },

{ id: '20000002', name: 'b1' }

]

效果:

复制代码
<template>
  <div id="app">
    <!-- 搜索框 -->
    <el-input
      placeholder="请输入搜索内容"
      v-model="filterText"
      @input="onFilterInput"
      clearable
    >
      <template #append>
        <el-button icon="el-icon-search"></el-button>
      </template>
    </el-input>

    <!-- 树形结构 -->
    <el-tree
      :data="treeData"
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="tree"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // 动态规则,例如 "5-3-3"
      rule: '5-3-3',
      // 动态数据列表,现在是对象数组
      dataList: [
        { id: '10000', name: 'a' },
        { id: '10000001', name: 'a1' },
        { id: '10000001001', name: 'a1c' },
        { id: '20000', name: 'b' },
        { id: '20000002', name: 'b1' }
      ],
      treeData: [], // 将会填充的树形结构数据
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      filterText: '' // 搜索关键字
    };
  },
  created() {
    this.generateTree();
  },
  methods: {
    generateTree() {
      const segments = this.rule.split('-').map(Number);
      const root = {};
      const idsToNames = new Map(this.dataList.map(item => [item.id, item.name]));

      this.dataList.forEach(({ id }) => {
        let node = root;
        let start = 0;
        for (let i = 0; i < segments.length; i++) {
          const end = start + segments[i];
          const segment = id.slice(start, end);
          if (!node[segment]) {
            node[segment] = { label: idsToNames.get(id), children: {} };
          }
          if (end === id.length) break; // 如果已经到达ID的末尾,则停止
          node = node[segment].children;
          start = end;
        }
      });

      function toTreeArray(node) {
        return Object.keys(node).map(key => ({
          ...node[key],
          children: toTreeArray(node[key].children)
        })).filter(item => item.label !== undefined);
      }

      this.treeData = toTreeArray(root);
    },
    handleNodeClick(data) {
      console.log('Node clicked:', data);
    },
    onFilterInput() {
      this.$refs.tree.filter(this.filterText);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
  watch: {
    // 监听规则或数据的变化以重新生成树
    rule: 'generateTree',
    dataList: {
      handler: 'generateTree',
      deep: true
    }
  }
};
</script>

<style>
/* 添加样式 */
</style>
相关推荐
王伯安呢11 分钟前
Java开发环境配置入门指南
java·开发语言·jvm·eclipse·环境搭建·新手
·前路漫漫亦灿灿14 分钟前
C++-类型转换
开发语言·c++
灵感__idea18 分钟前
JavaScript高级程序设计(第5版):前端的能力边界
前端·javascript·程序员
华洛19 分钟前
SEO还没死,GEO之战已经开始
前端·javascript·产品
IT_陈寒22 分钟前
Python性能优化:5个被低估的魔法方法让你的代码提速50%
前端·人工智能·后端
Kyln.Wu29 分钟前
【python实用小脚本-205】[HR揭秘]手工党逐行查Bug的终结者|Python版代码质量“CT机”加速器(建议收藏)
开发语言·python·bug
As331001031 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
计算机毕业设计木哥31 分钟前
Python毕业设计推荐:基于Django的饮食计划推荐与交流分享平台 饮食健康系统 健康食谱计划系统
开发语言·hadoop·spring boot·后端·python·django·课程设计
不想上班只想要钱38 分钟前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js
rockmelodies39 分钟前
Java安全体系深度研究:技术演进与攻防实践
java·开发语言·安全