Ehan Van的博客
首页
前端笔记
首页
前端笔记
  • 前端笔记

    • v-on的使用
    • 编写一个Vue递归组件
    • 非vue文件中申明的ref如何使用
    • Vue3如何在hook中执行异步函数并同步返回响应式数据
    • 如何终止forEach循环
    • 递归创建下拉树数据
    • 编写一个Vue Web Components
    • js数组toString的使用
    • vueconfig配置多page遇到的坑
    • js事件循环机制
    • React列表渲染中图片闪烁问题
    • 开发中未配置Referrer遇到的坑
    • 前端实现文件分片上传
    • 防抖函数
    • 编写一个vue插件
    • 发布订阅模式

代码示例

import { ref, onMounted } from 'vue'

import { ComponentOptions } from '@/types/components'

import { queryZsdt006TreeInfo } from '@/api/system-manage/base-data'

// 下拉树数据
const deptData = ref<ComponentOptions[]>([])

// 获取下拉树数据
const getTreeData = async (): Promise<void> => {
  type TreeData = {
    departmentName: string
    departmentCode: string
    childrenList: TreeData[]
  }

  // 创建建下拉树方法
  const generateTreeData = (arr: TreeData[]): ComponentOptions[] => {
    return arr.map(({ departmentCode, departmentName, childrenList }) => {
      return {
        label: departmentName,
        value: departmentCode,
        children: childrenList?.length ? generateTreeData(childrenList) : []
      }
    })
  }

  const { data } = await queryZsdt006TreeInfo()

  const tempDeptData = generateTreeData(data)
  
  deptData.value = tempDeptData
}

onMounted(getTreeData)
Prev
如何终止forEach循环
Next
编写一个Vue Web Components