前言
此文章仅为总结写过的封装公共弹窗出现的情况,为大家提供思路.不会展示所有代码.
树型数据展示
树型数据展示有三种方法
1: 后台拼接好完整树结构(搜索可以纯前台操作; 复杂的弹窗可以减少很多回勾操作)
2: 逐级懒加载(将一次性的卡顿分散到各个层级)
3: 后台仅返回数据数组,前台转成树型结构(数据量大卡顿时,可以分散服务器压力,优化效果)
组件传参
主要针对可以获取到所有数据的公共弹窗(1 3),适用范围更广
1: 弹窗名称(给默认值,也可供修改)
2: 回勾数据 (多个共用该弹窗每次打开要回勾原本选中数据)
3: 传入数据(给默认数据,但是要支持展示传入)
4: 是否一定使用传入数据(以防接口返回空数据,无法判断使用哪个数据)
5: 传入数据时判断loading (传入数据一般是接口获取,获取时间长可以看到弹窗中数据切换过程)
方法注意点
1: 使用率很高并且数据量较大时可以进行首次缓存处理(第一次加载时获取后进行本地缓存)
2: 获取默认数据和传入数据都是调取接口,但是接口调取时间不定,所以在赋值数据时要加上判断,以防数据覆盖.
3: 遮照层关闭有两种情况,1)不使用传入数据,获取到默认数据则关闭 2) 使用传入数据,数据成功获取后关闭弹窗; 要注意获取到默认数据关闭前要判断是否使用传入数据(接口异步,无法判断先后)
4: 一个页面可能多处复用同一组件,展示相同但是可能勾选数据不同,所以每次关闭时要清空本次勾选数据或者直接v-if,具体哪种方式效率更高可视具体情况而定
5: 回勾数据会出现多种情况.1)每次打开弹窗需要回勾上次操作选中数据;2)使用页面根据接口展示默认勾选数据,要考虑到接口异步情况,数据接口有可能会在打开弹窗后出现.而数据又有两种情况,所以在获取到默认数据和传入数据后需要再次回勾下
6: 如果使用第3种树型展示方法,前台将扁平数据转成树型数据有多种方法,但是有效率对比.数据量大时使用递归方法效率很差,可以采用两次遍历进行优化,以下提供一种方法作参考.
//扁平数据
let obj = [
{ id: 1, pid: 0, name: '技术管理层' },
{ id: 0, pid: '', name: '管理层' },
{ id: 2, pid: 1, name: 'CTO' },
{ id: 3, pid: 0, name: '销售管理层' },
{ id: 4, pid: '', name: '高级职称' },
{ id: 5, pid: '', name: '初级职称' }
]
//扁平数据转树型方法
tranListToTreeData(list) {
const treeList = [],
map = {}
list.forEach(item => {
if (!item.children) item.children = []
map[item.id] = item
})
list.forEach(item => {
const parent = map[item.pid]
if (parent) parent.children.push(item)
else treeList.push(item)
})
return treeList
}
//转化后的数据
[
{
id: 0,
pid: '',
name: '管理层',
children: [
{
id: 1,
pid: 0,
name: '技术管理层',
children: [ { id: 2, pid: 1, name: 'CTO', children: [] } ]
},
{ id: 3, pid: 0, name: '销售管理层', children: [] }
]
},
{ id: 4, pid: '', name: '高级职称', children: [] },
{ id: 5, pid: '', name: '初级职称', children: [] }
]
总结
以上仅为个人封装树型穿梭框组件所遇,提取了大家可能会遇到的共同情况进行总结,也为自己做一些梳理.