vue树结构搜索 递归 watch监听 一个表格间隔分开样式

vue树结构搜索 递归 watch监听 一个表格间隔分开样式

树结构搜索.vue

<template>
    <div class="container">
          <el-input 
        v-model= "search"
        size="mini"
        suffix-icon ="el-icon-search"
        placeholder = "请输入关键字搜索"
        @input="searchName"
        />
    </div>
</template>
<script>
export default {
       data(){
           return{
             search:"",
           }
       },
       watch:{
        //    方式一
           search(val){
               if(!val){
                   this.tableData =this.cloneTableData;
               }
               if(val){
                   let filterData = this.cloneTableData.concat();
                   var Ary = rebuildData(this.search,filterData);
                   this.tableData = Ary;
               }
           }
       },
       methods:{
        //    方式二
           getData(){
               let dataList = res.obj;
               this.cloneTableData = objData.data;
                if(!this.search){
                   this.tableData =this.cloneTableData;
               }else{
                   let filterData = this.cloneTableData.concat();
                   var Ary = rebuildData(this.search,filterData);
                   this.tableData = Ary;
               }
           }
       }
       created(){
           this.tableData = res.obj;
           this.cloneTableData = res.obj;
       },

},
var ary;
const rebuildData = (value,arr){
    if(!arr){
        return [];
    }
    let newarr = [];
    arr.forEach((element)=>{
        if(element.showName.indexOf(value)>-1){
            const ab = rebuildData(value,element.children);
            const obj = {
                ...element,
                children:ab,
            };
            newarr.push(obj);
        }else{
            if(element.children && element.children.length>0){
                 const ab = rebuildData(value,element.children);
                 const obj = {
                    ...element,
                    children:ab,
                };
                if(ab && ab.length> 0){
                    newarr.push(obj);
                }
            }
        }
    });
    ary = newarr;
    return newarr
};
</script>
<style scoped lang="scss">
// ::v-deep   增加权重
// 搜索框样式
::v-deep .el-input_inner{
    background-color:#1d658b;
}
::v-deep .el-input_suffix{
    margin-right:15px
}
</style>
<style lang="scss">
    // 一个表格分开间隔
    .container{
        .el-table_row--level-0:not(:nth-of-type(1)){
            margin-top:10px;
            display:inline-block !important;
            display:flex;
            width:10000px;
        }

        .el-table_row--level-0{
            background: #144861 !important;
            z-index:10000;
            color:#82c5e8;
            font-weight:bold;
            td{
                background:#144861 !important
            }
        }
    }
</style>

效果图

1.1-表格界面解析

1.2-搜索层级