先来描述一下大致需求
使用el-table下钻功能,但是下钻顺序由用户自定义
目前数据量很大,后端不会一次性返回,需要用户每点击一次下钻,就再次请求。
所以只有前端知道这个下钻顺序,并且上下级之前是隶属关系(比如1级部门2级部门)
RD需求知道从当前节点到根节点的下钻路径是啥,才能查询到准确的数据,这个下钻是前端控制的哦(维度+维度id)维度是前端用户选的顺序,维度id是后端给的列表
1、问题1
我们仅仅知道用户点击的那一条数据,所以这条数据必须是唯一的才能构建一颗唯一的树结构,如果后端给不到你唯一的值,一定要让他给你生成一个唯一值id
2、构建树
我采用的string切割插入值
table初始化进来只有一层,并且是固定的
const key = `advertiser-${item.id}` // advertiser是维度,后面的参数是id
this.parent_dimension[key] = {}
此时生成的是
{
advertiser-10: {}
}
3、用户点击下钻按钮>
,再次请求数据
const tempArr = JSON.stringify(this.parent_dimension).replace(/\\/g, '').split(parentKey)
const rear = tempArr[1]
tempArr[1] = insert.join(',') + rear
this.query.parent_dimension = tempArr.join(parentKey)
this.query.parent_dimension = this.query.parent_dimension.replace(/\\/g, '') // 有反斜杠导致无法判断位置
以上操作即可生成树结构
4、计算当前parentKey到root的路径
// 递归查找到跟节点的路径
findRoot (obj, v) {
for (const key in obj) {
if (key === v) return key
if (typeof (obj[key]) === 'object') {
const temp = this.findRoot(obj[key], v)
if (temp) return key + '&' + temp
}
}
},