JS实现动态筛选数据后重新赋值

数据

menuList: [
        {
          id: '1',
          type: 'group',
          name: '开始节点',
          ico: 'el-icon-video-play',
          open: true,
          children: [
            {
              id: '11',
              type: 'timer',
              name: '数据接入',
              ico: 'el-icon-time',
              // 自定义覆盖样式
              style: {}
            },
            {
              id: '12',
              type: 'task',
              name: '接口调用',
              ico: 'el-icon-odometer',
              // 自定义覆盖样式
              style: {}
            }
          ]
        },
        {
          id: '2',
          type: 'group',
          name: '结束节点',
          ico: 'el-icon-video-pause',
          open: true,
          children: [
            {
              id: '21',
              type: 'end',
              name: '流程结束',
              ico: 'el-icon-caret-right',
              // 自定义覆盖样式
              style: {}
            },
            {
              id: '22',
              type: 'over',
              name: '数据清理',
              ico: 'el-icon-shopping-cart-full',
              // 自定义覆盖样式
              style: {}
            }
          ]
        }
      ] 

　　

 

 

 

 

页面 点击回车改变数据


<el-input
      prefix-icon="el-icon-search"
      size="medium"
      placeholder="请输入内容"
      v-model="search"
      @change="inputSearch"
      @clear="inputSearch"
      @keyup.enter.native="filterSearch()"
      clearable
    ></el-input>

　　

 

点击回车的方法 

filterSearch(){
          var tempMenuList = JSON.parse(JSON.stringify(this.menuListInit));
          if(this.search == ''){
            this.menuList = JSON.parse(JSON.stringify(tempMenuList));
          }else{
             this.menuList = [];
             var _this = this;
             //筛选符合要求的  MAP
              tempMenuList.map(item => {
                _this.menuList.push(item);
                if(item.children && Array.isArray(item.children)) {
　　　　　　　　　　　//重新赋值子项  - filter 会改变本身的值  indexOF 检索 name 包含传过来的值
                  _this.$set(item, 'children', item.children.filter(items =>     
                          items.name.indexOf(_this.search) != -1 ));
                }
              })
          }
        },        

　　

 

 

 

搜索

复制