element ui 树形表格按多条件查询（前端处理）

效果

边输入边查询，实现多条件查询树形表格。
完整代码如下

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
	<el-form-item label="执行人" prop="executeUser">
		<el-input v-model.trim="queryParams.executeUser" placeholder="请输入执行人搜索" clearable />
	</el-form-item>
	<el-form-item label="状态" prop="executeState">
		<el-select v-model="queryParams.executeState" placeholder="请选择" clearable
								style="width: 240px">
			<el-option v-for="dict in stateList" :key="dict.value" :label="dict.text"
									:value="dict.value" />
		</el-select>
	</el-form-item>
</el-form>
<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 label="任务层级" width="180">
			<template slot-scope="{ row }">
				<span>{{ row.taskLevel }}级</span>
			</template>
	  </el-table-column>
      <el-table-column prop="executeName" label="执行主体" width="180"></el-table-column>
	  <el-table-column prop="executeUser" label="执行人"> </el-table-column>
	  <el-table-column prop="executeState" label="状态" :filters="stateList" :filter-method="filterHandler">
		<template slot-scope="{ row }">
			<span :style="`color:${colorObjt[row.executeState].color}`">
				  {{ colorObjt[row.executeState].name }}
			</span>
		</template>
	  </el-table-column>
	  <el-table-column label="完成时间">
		<template slot-scope="{ row }">
			<span>{{ parseTime(row.completeTime) }}</span>
		</template>
	  </el-table-column>
	 <el-table-column label="任务开始时间">
		<template slot-scope="{ row }">
			<span>{{ parseTime(row.startTime) }}</span>
		</template>
	  </el-table-column>
	  <el-table-column label="任务结束时间">
		<template slot-scope="{ row }">
		    <span>{{ parseTime(row.endTime) }}</span>
		</template>
	  </el-table-column>
    </el-table>

<script>
	let proVal = null
	export default {
		dicts: ["sys_normal_disable", "policy_type", "execute_state"],
		props: {
			visible: false,
		},
		watch: {
			visible(val) {
				this.showDetails = val;
			},
		},
		computed: {
		    //主要代码
			treeTable() {
				let treeData = this.tableData
				//获取需要刷选的属性
				const propList = this.exitProps(this.queryParams)
				//初始化
				proVal = {}
				//赋属性
				propList.forEach(item => {
					proVal[item] = ''
				})
				//如果都为false 则不进行过滤，直接获取所有
				if (propList.length > 0) {
					let handleTreeData = this.handleTreeData(treeData, this.queryParams, Object.keys(this.queryParams))
					this.setExpandRow(handleTreeData)
					this.expandRow = this.expandRow.join(',').split(',')
					return handleTreeData
				}

				return this.tableData
			}
			// treeTable: function() {
			// 	var searchValue = this.search;
			// 	if (searchValue) {
			// 		let treeData = this.tableData;
			// 		let handleTreeData = this.handleTreeData(treeData, searchValue);
			// 		this.setExpandRow(handleTreeData);
			// 		this.expandRow = this.expandRow.join(",").split(",");
			// 		return handleTreeData;
			// 	}
			// 	return this.tableData;
			// },
		},
		data() {
			return {
				search: "",
				expandRow: [],
				// 显示隐藏
				showDetails: false,
				// 查询参数
				queryParams: {
					executeUser: "",
					executeState: undefined,
				},
				// 明细表格
				tableData: [
				{
          			id: 1,
          			taskLevel:"1",
          			executeName: '华东大区',
          			executeUser:'A员工',
         			executeState: '0',
         			completeTime:'',
         			startTime:'',
         			endTime:'',
          			children: [
            			{
              				id: 2,
          					taskLevel:"2",
          					executeName: '林斌',
          					executeUser:'林斌',
         					executeState: '0',
         					completeTime:'',
         					startTime:'',
         					endTime:'',
            			},
          			]
        		}],
				// 状态
				colorObjt: {
					0: {
						name: "未开始",
						color: "#999999",
					},
					1: {
						name: "进行中",
						color: "#3770e8",
					},
					2: {
						name: "已完成",
						color: "#f59a23",
					},
					3: {
						name: "超时完成",
						color: "#ed9639",
					},
					4: {
						name: "未完成",
						color: "#c43134",
					},
				},
				stateList: [
					//0 未开始 1进行中 2 已完成 3 超时完成 4 未完成
					{
						text: "未开始",
						value: "0",
					},
					{
						text: "进行中",
						value: "1",
					},
					{
						text: "已完成",
						value: "2",
					},
					{
						text: "超时完成",
						value: "3",
					},
					{
						text: "未完成",
						value: "4",
					},
				],
				// 执行记录
				showRecord: false,
				// 节点列表
				nodeList: [],
				// 任务详情
				showTask: false,
				// xlsx
				xlsxSrc: "@/assets/images/xlsx.svg",
			};
		},
		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 queryParams 查询条件
			 * @param searchNames 查询条件的字段 用来与树形对象匹配
			 * @returns {*[]}
			 */
			handleTreeData(treeData, queryParams, searchNames) {
				if (!treeData || treeData.length === 0) {
					return []
				}
				//获取需要进行筛选的属性
				const propList = this.exitProps(this.queryParams)
				const array = []
				//把搜索条件的值进行提取赋值
				propList.forEach(prop => {
					proVal[prop] = queryParams[prop]
				})
				treeData.forEach(item => {
					let match = false
					//搜索条件的值是否和数据相匹配
					let isEqual = true
					propList.forEach(prop => {
						if (prop == "executeState") {
							isEqual = isEqual && String(item[prop]).includes(proVal[prop])
						} else {
							isEqual = isEqual && item[prop].includes(proVal[prop])
						}

					})
					match |= isEqual
					if (this.handleTreeData(item.children, queryParams, searchNames).length > 0 || match) {
						array.push({
							...item,
							children: this.handleTreeData(item.children, queryParams, searchNames),
						})
					}
				})
				return array
			},

			// 将过滤好的树形数据展开
			setExpandRow(handleTreeData) {
				if (handleTreeData.length) {
					for (let i of handleTreeData) {
						this.expandRow.push(i.id);
						if (i.children.length) {
							this.setExpandRow(i.children);
						}
					}
				}
			},
			
		},
	};
</script>