效果
边输入边查询，实现多条件查询树形表格。
完整代码如下
html
<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>
javascript
<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>