ES6 VUE 根据输入内容过滤树结构

VIP文章前端全栈分享站

已于 2023-06-26 15:01:14 修改

阅读量155

点赞数

分类专栏： JavaScript 栏文章标签： es6 vue.js 前端

于 2023-06-26 13:17:32 首次发布

CSDN-CRJ

本文链接：https://blog.csdn.net/CRJ453027119/article/details/131395309

版权

<template>
  <div>
    <el-input v-model="value" placeholder="请输入内容"></el-input>
    <el-button @click="handleQuery"> 查询</el-button>
    <el-tree :data="dataTreeList" :props="defaultProps" :default-expand-all="true"></el-tree>
  </div>
</template>
<script>
export default {
   
  data() {
   
    return {
   
      value: "",
      data: [
        {
   
          id: 1,
          label: "一级 1",
          level: 1,
          parentId: null,
          children: [
            {
   
              id: 4,
              label: "二级 1-1",
              level: 2,
              parentId: 1,
              children: [
                {
   
                  id: 9,
                  label: "三级 1-1-1",
                  level: 3,
                  parentId: 4,
                  children: [
                    {
   
                      id: 11,
                      label: "四级 1-1-1-1",
                      level: 4,
                      parentId: 9,
                    },
                    {
   
                      id: 12,
                      label: "四级 1-1-1-2",
                      level: 4,
                      parentId: 9,
                      children: [
                        {
   
                          id: 13,
                          label: "五级 1-1-1-1-1",
                          level: 5,
                          parentId: 12,
                        },
                        {
   
                          id: 14,
                          label: "五级 1-1-1-1-2",
                          level: 5,
                          parentId: 12,
                          children: [
                            {
   
                              id: 15,
                              label: "六级 1-1-1-1-1-1",
                              level: 6,
                              parentId: 14,
                            },
                            {
   
                              id: