记录一下级联选择器的懒加载使用 --> 动态加载数据和回显

数据的动态加载比较简单,看一下文档也能明白,这里就直接上代码,在注释里讲一下代码的作用

const planProps = ref({
  lazy: true,  //开启懒加载
  // 懒加载获取下一级所有子节点的方法,node是当前点击的节点的信息
  async lazyLoad(node, resolve) {
    // level指当前点击的节点级别
    const { level } = node
    let arr = []
    // 当level为0,加载第一级的数据,如果本地有,就做判断,level不为0,才去请求新数据
    if (!level) arr = props.planGroups
    else {
      // 这里的getPlanOfGroup是我在外面封装的根据id获取数据的方法
      // 因为我这里只需要两级,所以没传level,如果是多级级联选择器,可能需要level作为参数
      arr = await getPlanOfGroup(node.data.value)
    }
    // 最后根据获取的arr,映射出需要的数据
    const nodes = arr.map((item) => ({
      value: item.id,
      label: item.groupName || item.planName,
      leaf: level >= 1 // 级联选择器的最大级别(子菜单数)
    }))
    resolve(nodes) // 返回已经做好的数据
  }
})

如果是回显,官方文档就比较模糊了(好像根本就没有),查教程+实践之后总结了一下,懒加载的回显必须要有菜单的数据,才能根据v-model的变量去回显

当我们打开级联选择器所在的dialog,如果是编辑/查看,则拿到当前数据的关联预案id,并存放到外部ref变量里,并且用外部的这个变量去拿子菜单数据,这里有个小注意点,我们必须要让node中的id优先级高于外部的id,所以更改上面第13行为:

arr = await getPlanOfGroup(node.data.value || planGroupId.value)

这样,懒加载和回显就完成了