标签:C++ spdlog 光速入门 logger 简单 最快 c语言 方式 程序 退出 进阶篇 参数值 文档 gmock
vue + elementUI项目中,el-cascader级联选择器使用频率非常高,一些基本使用方法可以参考elementUI官方文档,本文主要研究当接口只返回最后一级id时,如何向上找出所有父级数据,并设置组件el-cascader的默认值!
准备测试数据:方位、省、市区级联选择。
var list = [ { parent: 0, value: 1, label: '东南', children: [ { parent: 1, value: 2, label: '上海', children: [ {parent: 2, value: 3, label: '普陀'}, {parent: 2, value: 4, label: '黄埔'}, {parent: 2, value: 5, label: '徐汇'} ] }, { parent: 1, value: 7, label: '江苏', children: [ {parent: 7, value: 8, label: '南京'}, {parent: 7, value: 9, label: '苏州'}, {parent: 7, value: 10, label: '无锡'} ] }, { parent: 1, value: 12, label: '浙江', children: [ {parent: 12, value: 13, label: '杭州'}, {parent: 12, value: 14, label: '宁波'}, {parent: 12, value: 15, label: '嘉兴'} ] } ] }, { parent: 0, value: 17, label: '西北', children: [ { parent: 17, value: 18, label: '陕西', children: [ {parent: 18, value: 19, label: '西安'}, {parent: 18, value: 20, label: '延安'} ] }, { parent: 17, value: 21, label: '新疆维吾尔自治区', children: [ {parent: 21, value: 22, label: '乌鲁木齐'}, {parent: 21, value: 23, label: '克拉玛依'} ] } ] }]
假设现在接口返回最后一级id数组是[13],表示选中杭州,需要根据id:13,找到所有父级id并组成数组 -> [1,12,13],(上面测试数据的value即id),具体方法如下:
/** * 针对树形数据结构的级联选择器组件,后台数据返回最后一级数据id * 封装处理方法,返回树形结构(注意此方法根据id返回对应结构的原始数据,根据不同场景,需再二次处理获得所需数据) * * @param list 级联选择器全部数据 * @param flagAttr 字段标识(id) * @param values 接口最后一级id数组 * @param parentKey 树形数据中的父级id字段 * @param childrenKey 父级的子数据数组 * * @return [treeData, ...] * */ export function findParentLevel(list, flagAttr, values, parentKey = 'parent', childrenKey = 'children') { if (!list || !list.length || !flagAttr || !Array.isArray(values)) return [] const longList = extractTree(list, childrenKey) // 展开树形数据 values = values.map(value => longList.find(item => item[flagAttr] === value)).filter(Boolean) return makeTree(longList, parentKey, childrenKey, flagAttr, values) // 返回树形结构数据 }
extractTree:
/** * * @param {Array} arrs 树形数据 * @param {string} childs 树形数据子数据的属性名,常用'children' * @param {Array} attrArr 需要提取的公共属性数组(默认是除了childs的全部属性) * @returns */ export function extractTree(arrs, childs, attrArr) { let attrList = [] if (!Array.isArray(arrs) && !arrs.length) return [] if (typeof childs !== 'string') return [] if (!Array.isArray(attrArr) || Array.isArray(attrArr) && !attrArr.length) { attrList = Object.keys(arrs[0]) attrList.splice(attrList.indexOf(childs), 1) } else { attrList = attrArr } const list = [] const getObj = (arr) => { arr.forEach(function(row) { const obj = {} attrList.forEach(item => { obj[item] = row[item] }) list.push(obj) if (row[childs]) { getObj(row[childs]) // 递归 } }) return list } return getObj(arrs) }
makeTree:
/** * 组合树形数据结构 * @param data 平铺后的所有树形数据 * @param pid 父级id * @param child 子数据数组字段 * @param id 子级id * @param childrenArray 接口返回的子级数据 * * @return [tree, ...] * */ export function makeTree(data, pid, child, id, childrenArray) { const parents = data.filter(p => p[pid] === 0) childrenArray.forEach(item => { makeLongList(item, item) }) dataToTree(parents, childrenArray.map(i => i.longList || [i]).flat(1)) return parents.filter(item => item[child]) /** * 递归向上寻找每一个子级数据对应的父级数据,并将所有父级数据放进接口返回子级数据的longList字段 * @param item1 接口返回的子级数据 * @param item2 向上寻找的父级数据, 顶级父级除外,上面已经获取到顶级数据 * * */ function makeLongList(item1, item2) { if (data.find(p => p[id] === item2[pid]) && data.find(p => p[id] === item2[pid])[pid]) { if (item1.longList) { item1.longList.push(data.find(p => p[id] === item2[pid])) } else { const it = JSON.parse(JSON.stringify(item1)) item1.longList = [it, data.find(p => p[id] === item2[pid])] } // 除去顶级数据 data.find(p => p[id] === item2[pid])[pid] && makeLongList(item1, data.find(p => p[id] === item2[pid])) } } function dataToTree(parents, children) { parents.map(p => { children.map((c, i) => { if (c[pid] === p[id]) { const _children = JSON.parse(JSON.stringify(children)) _children.splice(i, 1) dataToTree([c], _children) // 递归 if (p[child]) { p[child].push(c) } else { p[child] = [c] } } }) }) }
图中未处理的数据就是根据最后一级id向上查找父级数据,处理后的数据是将找到的树形数据继续平铺处理成组件需要的各级id组成的数组(若业务场景固定,只需要id数据,那么在findParentLevel方法中可以直接返回处理后的数据)。
标签:C++,spdlog,,光速入门,logger,简单,最快,c语言,方式,程序,退出,进阶篇,参数值,文档,gmock 来源:
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。