<template>
<div>
<el-form :model="queryParams">
<el-form-item label="查询条件">
<el-input placeholder="输入关键字进行过滤" v-model="queryParams.name">
</el-input>
</el-form-item>
</el-form>
<!-- <el-button @click="search">搜索</el-button> -->
<el-button @click="expandAll">展开</el-button>
<el-table
:data="treeTable"
style="width: 100%; margin-bottom: 20px"
border
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@expand-change="toggleRow"
row-key="id"
ref="table"
:default-expand-all="isExpandAll"
>
<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="address" label="地址"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="edit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
let proVal = null;
export default {
data() {
return {
tableData: [
{
id: 1,
date: "2016-05-02",
name: "胜多负少的",
address: "上海市普陀区金沙江路 1518 弄",
lv: 1,
children: [
{
id: 55,
date: "2016-05-07",
name: "发个小",
address: "上海市普陀区金沙江路 1519 弄",
lv: 2,
children: [
{
id: 58,
date: "2016-05-07",
name: "额外热",
address: "上海市普陀区金沙江路 1519 弄",
lv: 3,
},
],
},
{
id: 555,
date: "2016-05-07",
name: "dghfghfg",
address: "上海市普陀区金沙江路 1519 弄",
lv: 2,
children: [
{
id: 232,
date: "2016-05-07",
name: "jghjhgk",
address: "上海市普陀区金沙江路 1519 弄",
lv: 3,
children:[
{
id: 8989,
date: "2016-05-07",
name: "www",
address: "上海市普陀区金沙江路 1519 弄",
lv: 4,
}
]
},
],
},
],
},
{
id: 2,
date: "2016-05-04",
name: "递归",
address: "上海市普陀区金沙江路 1517 弄",
lv: 1,
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
lv: 1,
children: [
{
id: 31,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
lv: 2,
},
{
id: 32,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
lv: 2,
children: [
{
id: 56,
date: "2016-05-09",
name: "王小as虎",
address: "上海市普陀区金沙江路 1519 弄",
lv: 3,
},
],
},
],
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
lv: 1,
children:[
{
id: 75,
date: "2016-05-03",
name: "小虎",
address: "上海市普陀区金沙江路 1516 弄",
lv: 2,
}
]
},
],
// date: "",
levelData: new Map(),
expandRow: [],
queryParams: {
name: "",
},
isExpandAll: false,
};
},
created() {},
methods: {
search() {},
edit(row) {
console.log(row);
},
toggleRow(row, expanded) {
// orgId:id
// orgPositionLevel:层级（后台返回代表层级的字段，如果后台不返回，则自己对后台返回的数据进行改造）
const rowId = row.id;
const rowLevel = row.lv;
if (!expanded) {
return;
}
// 手动维护级别数据
// levelData 全局变量， levelData：new Map()
//new Map() 提供“键值对”的数据结构“key-value"，通过set存值，get取值
let list = this.levelData.get(rowLevel);
if (!list) {
list = [];
}
list.push(rowId);
//把当前点击层级作为key,id作为value
//点击同一个层级， id都会push进该key对应的value中
this.levelData.set(rowLevel, list);
// 获取当前级别所有的树
//通过遍历list 判断是否是同级的id，
//如果是同级的id，通过table自带的闭合属性设置该id的节点关闭
list.map((id) => {
if (id !== rowId) {
this.$refs.table.toggleRowExpansion({ id }, false);
}
});
},
//主要代码
/**
* 根据搜索条是否有值，把需要搜索的属性给保存返回
*/
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 == "name") {
isEqual = isEqual && String(item[prop]).includes(proVal[prop]);
// isEqual = isEqual && String(item[prop])==(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);
}
}
}
},
expandAll() {
console.log(33);
//el-table_expand-icon即为小三角的classname，不需要自己设置
var els = document.getElementsByClassName("el-icon-arrow-right");
for (var i = 0; i < els.length; i++) {
console.log(els);
els[i].click();
}
},
// tableExpand(data, flag) {
// data.forEach(item => {
// //用ref获取table表格，进行展开结构
// this.$refs.table.toggleRowExpansion(item, flag);
// //如果存在children 并且长度大于0
// if (item.children && item.children.length > 0) {
// //递归进行展开结构
// this.tableExpand(item.children, flag);
// } else {
// return
// }
// })
// },
},
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;
}
// this.tableExpand(this.tableData, true);
return this.tableData;
},
},
};
</script>
<style lang="less" scoped>
</style>
扫一扫
4271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
