对象数组按照指定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>
相关推荐
断竿散人4 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼5 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
月亮慢慢圆6 分钟前
拖拽API
前端
知了一笑6 分钟前
独立做产品,做一个,还是做多个找爆款?
前端·后端·产品
uhakadotcom7 分钟前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
_AaronWong7 分钟前
Electron 桌面应用侧边悬浮窗口设计与实现
前端·electron
玲小珑10 分钟前
LangChain.js 完全开发手册(九)LangGraph 状态图与工作流编排
前端·langchain·ai编程
鹏多多11 分钟前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
JarvanMo11 分钟前
用 `alice` 来检查 Flutter 中的 HTTP 调用
前端
小图图19 分钟前
Claude Code 黑箱揭秘
前端·后端