el-table树结构的搜索---递归遍历

点击可查看 ➡ element ui 树形表格过滤查询数据解决( 可直接套用 )

效果图

标题

 <el-table ref="tableData" :data="tableData" :height="tableheight" default-expand-all row-key="sysResourcesId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width:100%;margin:0 auto 5px;font-size:0.8rem" v-loading="loading" highlight-current-row>
            <el-table-column show-overflow-tooltip min-width="100" prop="sortNum" label="排序号" align="left"></el-table-column>
            <el-table-column show-overflow-tooltip prop="resourcesCode" label="编码" align="left" min-width="100">
              <!--  -->
              <template #header v-if="headerItem.seach">
                <el-popover v-if="headerItem.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible">
                  <el-input autofocus clearable @clear="clearSearch(headerItem)" style="width: 200px" size="small" v-model="headerItem.seachSetting.value" :placeholder="'请输入'+headerItem.label" @keyup.enter.native="todoSearchItself(headerItem)" />
                  <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearchItself(headerItem)">重 置</el-button>
                  <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearchItself(headerItem)">搜 索</el-button>
                  <div style="display: flex;align-items: center" slot="reference">
                    <span class="search-title">{{ headerItem.label }}</span>
                    <img style="width: 13px;margin-left: 10px;cursor: pointer" :src="headerItem.seachSetting.value&&headerItem.seachSetting.value!==''?img2:img1" />
                  </div>
                </el-popover>
              </template>
              <!--  -->
              <template slot-scope="scope">
                <span>{{scope.row.resourcesCode}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="resourcesCode" label="编码" align="left" min-width="100">
              <template slot-scope="scope">
                <span>{{scope.row.resourcesCode}}</span>
              </template>
            </el-table-column> -->
            .......

methods:{
	// 自身的按钮搜索点击、重置清除操作
    todoSearchItself (headerItem) {
      headerItem.visible = false
      if (headerItem.seachSetting.type === 'Input') {
        this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
      }
      this.todoSearch(this.seachFormItself)
    },
    clearSearchItself (headerItem) {
      if (headerItem.seachSetting && headerItem.seachSetting.type) {
        headerItem.visible = false
        if (headerItem.seachSetting.type === 'Input') {
          headerItem.seachSetting.value = ''
          this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        }
        this.clearSearch(this.seachFormItself)
      }
    },
    // 触发的方法-操作
    clearSearch (val) {
      console.log('清空--clearSearch', val)
      this.pageNum = 1
      this.pageSize = 10
      this.seachForm = val
      this.computedTableData()
    },
    todoSearch (val) {
      console.log('val---todoSearch', val)
      this.pageNum = 1
      this.pageSize = 10
      this.seachForm = val
      this.computedTableData()
    },
    // 根据搜索条件模糊查询-计算tableData
    computedTableData () {
      console.log('查询', this.seachForm)
      /* resourcesCode  resourcesName */
      console.log('表格', this.tableData)
      const tableCopyData = JSON.parse(JSON.stringify(this.copyTableData))
      if (this.seachForm.resourcesCode && this.seachForm.resourcesName) {
        const array = this.handleTreeData(tableCopyData, this.seachForm.resourcesCode, 'resourcesCode')
        const arrayFinally = this.handleTreeData(array, this.seachForm.resourcesName, 'resourcesName')
        this.tableData = arrayFinally
      } else if (this.seachForm.resourcesCode && !this.seachForm.resourcesName) {
        const array = this.handleTreeData(tableCopyData, this.seachForm.resourcesCode, 'resourcesCode')
        this.tableData = array
      } else if (!this.seachForm.resourcesCode && this.seachForm.resourcesName) {
        const arrayFinally = this.handleTreeData(tableCopyData, this.seachForm.resourcesName, 'resourcesName')
        this.tableData = arrayFinally
      } else {
        this.tableData = tableCopyData
      }
      /* if (this.seachForm.resourcesCode && this.seachForm.resourcesName) {
        const array = this.recursiveFilter(tableCopyData, this.seachForm.resourcesCode, 'resourcesCode')
        const arrayFinally = this.recursiveFilter(array, this.seachForm.resourcesName, 'resourcesName')
        this.tableData = arrayFinally
      } else if (this.seachForm.resourcesCode && !this.seachForm.resourcesName) {
        const array = this.recursiveFilter(tableCopyData, this.seachForm.resourcesCode, 'resourcesCode')
        this.tableData = array
      } else if (!this.seachForm.resourcesCode && this.seachForm.resourcesName) {
        const arrayFinally = this.recursiveFilter(tableCopyData, this.seachForm.resourcesName, 'resourcesName')
        this.tableData = arrayFinally
      } else {
        this.tableData = tableCopyData
      } */
      // console.log('array', array)
    },
    //  树形表格过滤
    handleTreeData (treeData, searchValue, keyName) {
      if (!treeData || treeData.length === 0) {
        return []
      }
      const array = []
      for (let i = 0; i < treeData.length; i += 1) {
        let match = false
        for (const pro in treeData[i]) {
          if (pro === keyName) {
            match |= treeData[i][pro].includes(searchValue)
            if (match) break
          }
          /* if (typeof (treeData[i][pro]) === 'string') {
            match |= treeData[i][pro].includes(searchValue)
            if (match) break
          } */
        }
        if (this.handleTreeData(treeData[i].children, searchValue, keyName).length > 0 || match) {
          array.push({
            ...treeData[i],
            children: this.handleTreeData(treeData[i].children, searchValue, keyName)
          })
        }
      }
      return array
    },
    /* recursiveFilter (arr, type, keyName) {
      console.log('arr-type', arr, type)
      const that = this
      const data = arr.filter(item => {
        return item[keyName].indexOf(type) !== -1
      }).map((item) => {
        item = Object.assign({}, item)
        if (item.children) {
          // 递归循环
          item.children = that.recursiveFilter(item.children, type, keyName)
        }
        return item
      })
      return data
    }, */
}