表格树进行条件查询（前端处理）

一般情况，查询条件都是通过后端去做的，如果后端说要让你去做，直接反手给他一个

大嘴巴子，前端做这种搜索只适用于前期，如果需求只有一两个字段搜索还好，

而且不需要导出，那前端就可以使用这个去试试，如果有根据搜索条件导出

这个列表的数据，那玩个毛呀，直接甩给后端，臣妾做不到

效果展示

 

最近公司需求 需要做一个任务分配的功能(已完成点击这里),由于可能分配的太多不太好找某一个任务就想做一个列表展示，通过搜索进行查询，好家伙对树的数据进行筛选查询

 当时就想好麻烦，就想着我试着搞一天，如果可以就不用后端去搞了，搞了一上午毛都没有想到

 脑瓜子又嗡嗡了，去厕所释放一下，既然element-ui表格可以单条件过滤，那是不是也可以多条件过滤，理论存在实践开始，还没开始就遇到问题，我这他喵的是树形结构，不是平常的列表，既然是树那就得用到递归，那查询到了是不是应该按照树形结构显示过滤后的树型结构，ok实践开始

对树进行过滤

   /**
     * 过滤筛选数据
     * @param treeData 树形数据
     * @param searchForm 查询条件
     * @param searchNames 查询条件的字段 用来与树形对象匹配
     * @returns {*[]}
     */
    handleTreeData (treeData, searchForm, searchNames) {
      if (!treeData || treeData.length === 0) {
        return []
      }
      //获取需要进行筛选的属性
      const propList = this.exitProps(this.searchForm)
      const array = []
      //把搜索条件的值进行提取赋值
      propList.forEach(prop => {
        proVal[prop] = searchForm[prop]
      })
      treeData.forEach(item => {
        let match = false
        //搜索条件的值是否和数据相匹配
        let isEqual=true
        propList.forEach(prop => {
          isEqual = isEqual && item[prop].includes(proVal[prop])
        })
        match |= isEqual
        if (this.handleTreeData(item.children, searchForm, searchNames).length > 0 || match) {
          array.push({
            ...item,
            children: this.handleTreeData(item.children, searchForm, searchNames),
          })
        }
      })
      return array
    },

处理过滤后展开的树形

    /**
     * 处理筛选出来的数据
     * @param treeData
     */
    setExpandRow(treeData) {
      if (treeData.length) {
        for (let i of treeData) {
          this.expandRow.push(i.id)
          if (i.children.length) {
            this.setExpandRow(i.children)
          }
        }
      }
    },

 到这基本完成，完整的代码块

html

<template>
  <div style="width: 100%;text-align: left">
    <el-input maxLength="30"
              style="width: 20%"
              placeholder="名称"
              v-model="searchForm.name"
              clearable
    />
    <el-input maxLength="10"
              style="width: 20%;margin-left: 1%"
              placeholder="年龄"
              v-model="searchForm.age"
              clearable
    />
    <el-input maxLength="10"
              style="width: 20%;margin-left: 1%"
              placeholder="位置"
              v-model="searchForm.address"
              clearable
    />
    <el-input maxLength="10"
              style="width: 20%;margin-left: 1%"
              placeholder="日期"
              v-model="searchForm.date"
              clearable
    />
    <el-table
        :data="treeTable"
        style="width: 100%;margin-top: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="date"
          label="日期"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

 js

<script>

let proVal = null
export default {
  name: 'Home',
  components: {},
  data () {
    return {
      searchForm: {
        name: '',
        age: '',
        address: '',
        date: '',
      },
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎1',
          age: '16',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎2',
          age: '17',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎3',
          age: '20',
          address: '上海市普陀区金沙江路 6654 弄',
          children: [
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎4',
              age: '21',
              address: '上海市普陀区金沙江路 2345 弄'
            },
            {
              id: 32,
              date: '2016-05-01',
              name: '王小虎5',
              age: '19',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎6',
          age: '20',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      expandRow: [],
    }
  },
  computed: {
    treeTable () {
      let treeData = this.tableData
      //获取需要刷选的属性
      const propList = this.exitProps(this.searchForm)
      //初始化
      proVal = {}
      //赋属性
      propList.forEach(item => {
        proVal[item] = ''
      })
      //如果都为false 则不进行过滤，直接获取所有
      if (propList.length > 0) {
        let handleTreeData = this.handleTreeData(treeData, this.searchForm, Object.keys(this.searchForm))
        this.setExpandRow(handleTreeData)
        this.expandRow = this.expandRow.join(',').split(',')
        return handleTreeData
      }

      return this.tableData
    }
  },
  methods: {
    /**
     * 根据搜索条是否有值，把需要搜索的属性给保存返回
     */
    exitProps (obj) {
      let propList = []
      for (const prop in obj) {
        if (obj[prop]) {
          propList.push(prop)
        }
      }
      return propList
    },
    /**
     * 处理筛选出来的数据
     * @param treeData
     */
    setExpandRow (treeData) {
      if (treeData.length) {
        for (let i of treeData) {
          this.expandRow.push(i.id)
          if (i.children.length) {
            this.setExpandRow(i.children)
          }
        }
      }
    },
    /**
     * 过滤筛选数据
     * @param treeData 树形数据
     * @param searchForm 查询条件
     * @param searchNames 查询条件的字段 用来与树形对象匹配
     * @returns {*[]}
     */
    handleTreeData (treeData, searchForm, searchNames) {
      if (!treeData || treeData.length === 0) {
        return []
      }
      //获取需要进行筛选的属性
      const propList = this.exitProps(this.searchForm)
      const array = []
      //把搜索条件的值进行提取赋值
      propList.forEach(prop => {
        proVal[prop] = searchForm[prop]
      })
      treeData.forEach(item => {
        let match = false
        //搜索条件的值是否和数据相匹配
        let isEqual=true
        propList.forEach(prop => {
          isEqual = isEqual && item[prop].includes(proVal[prop])
        })
        match |= isEqual
        if (this.handleTreeData(item.children, searchForm, searchNames).length > 0 || match) {
          array.push({
            ...item,
            children: this.handleTreeData(item.children, searchForm, searchNames),
          })
        }
      })
      return array
    },
  }
}
</script>

问题：由于筛选条件只有三个 所以就直接进行排列组合，如果这里有很多那这个就很麻烦，有待改进。

各位大佬有什么好方法可以进行处理可以在评论区留言