封装树型公共弹窗

前言

此文章仅为总结写过的封装公共弹窗出现的情况，为大家提供思路．不会展示所有代码．

---

树型数据展示

树型数据展示有三种方法

１: 后台拼接好完整树结构（搜索可以纯前台操作; 复杂的弹窗可以减少很多回勾操作）

２: 逐级懒加载（将一次性的卡顿分散到各个层级）

３: 后台仅返回数据数组，前台转成树型结构（数据量大卡顿时,可以分散服务器压力,优化效果）

---

组件传参

主要针对可以获取到所有数据的公共弹窗(１ 3),适用范围更广

１: 弹窗名称（给默认值，也可供修改）

２: 回勾数据 （多个共用该弹窗每次打开要回勾原本选中数据）

３: 传入数据（给默认数据，但是要支持展示传入）

４: 是否一定使用传入数据（以防接口返回空数据，无法判断使用哪个数据）

５: 传入数据时判断loading (传入数据一般是接口获取,获取时间长可以看到弹窗中数据切换过程)

---

方法注意点

１: 使用率很高并且数据量较大时可以进行首次缓存处理（第一次加载时获取后进行本地缓存）

２: 获取默认数据和传入数据都是调取接口，但是接口调取时间不定，所以在赋值数据时要加上判断，以防数据覆盖．

３: 遮照层关闭有两种情况，1)不使用传入数据，获取到默认数据则关闭 2) 使用传入数据，数据成功获取后关闭弹窗;  要注意获取到默认数据关闭前要判断是否使用传入数据（接口异步，无法判断先后）

４: 一个页面可能多处复用同一组件，展示相同但是可能勾选数据不同，所以每次关闭时要清空本次勾选数据或者直接v-if，具体哪种方式效率更高可视具体情况而定

５: 回勾数据会出现多种情况．１)每次打开弹窗需要回勾上次操作选中数据；2)使用页面根据接口展示默认勾选数据，要考虑到接口异步情况，数据接口有可能会在打开弹窗后出现．而数据又有两种情况，所以在获取到默认数据和传入数据后需要再次回勾下

６: 如果使用第３种树型展示方法，前台将扁平数据转成树型数据有多种方法，但是有效率对比.数据量大时使用递归方法效率很差，可以采用两次遍历进行优化，以下提供一种方法作参考．

／／扁平数据
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: [] }
]

---

 

总结

以上仅为个人封装树型穿梭框组件所遇，提取了大家可能会遇到的共同情况进行总结，也为自己做一些梳理．