前端过滤加模糊查询/模糊查询（不区分大小写）

<template> 
  <el-container>
      <el-aside width="350px" class="elAside">
         <div class="leftTop">
             <img src="../assets/guowanglogo.png"/>
             <el-input v-model="filterText" placeholder="请输入要搜索的内容..." style="width:100%;margin:20px 0;"></el-input>
         </div>
         <div class="leftBottom">
             <el-tree
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick" ref="tree">
            </el-tree>
         </div>
       </el-aside>
      <el-container>
        <div class="markdown-body " ref="articleDiv"></div>
        <!-- <router-view/> -->
      </el-container>
</el-container>
</template>

<script>
import axios from 'axios' 
export default {  
    data: function ()  { 
        return {
            filterText: '',
            treeData: [],
            defaultProps: {
                children: 'treeNode',
                label: 'nodeName'
            }
        }
    },
    created:function(){},
    mounted:function(){
        this.getTreeData()
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {   
        handleNodeClick(data) {
            console.log(1, data);
            let articleId = data.articleId
            if (articleId !== 0) {
                this.$api.tree.getArticleById({
                    id: data.articleId
                })
                .then(res => {
                    if (res.success) {
                        this.$refs.articleDiv.innerHTML= res.content
                    } else {
                        this.$message.warning(res.message)
                    }
                    // let index1 = res.indexOf('<div class="markdown-body">')
                    // let index2 = res.indexOf('</body>')
                    // let html = res.substring(index1, index2)
                    // this.$refs.articleDiv.innerHTML=html
                })
                .catch(function(error){
                    console.log(error);
                })
            }
            
        },
        getTreeData: function(){
            this.$api.tree.getTreeData()
            .then(res => {
                if(res.success){
                    this.treeData = res.data
                }    
            })
            .catch(function(error){
                console.log(error);
            })
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.nodeName.toLowerCase().indexOf(value.toLowerCase()) !== -1;
          }
    },
    
}
</script>

<style >
@import '../css/default.css';
@import '../css/github.css';
.el-container{
    height: 100%;
    overflow-y:auto;
}
.el-tree{
    background-color: initial;
}
.el-tree-node__content:hover{
    background-color: initial;
}
.el-tree-node:focus>.el-tree-node__content{
    color: initial;
    background-color: #FFF;
}
.elAside{
    background:#f1f1f1;
    padding: 10px;
}
.leftTop{
    padding-top:10px;
}
.markdown-body {
    text-align:left;
    width:720px;
    margin:0 auto;
}
</style>