vue3使用element-plus 树组件(el-tree)数据回显

HTML:

html 复制代码
<el-tree
    ref="elTreeRef"
    :data="menuVos"
    :props="{ children: 'children', label: 'name' }"
    :check-strictly="false"
    show-checkbox
    node-key="id"
    :default-checked-keys="roleForm.menuIds"
    @check="handleCheckChange"
            />

JS:

html 复制代码
const elTreeRef = ref<InstanceType<typeof ElTree>>()
const menuVos = ref([]) //菜单树列表
const roleForm:any = reactive({})

/**
 * 获取树节点选中时的id集合
 */
function handleCheckChange(data1: any, data2: any) {
  // 选中的子节点
  const checkedKeys = data2.checkedKeys
  // 选中的父节点
  const halfCheckedKeys = data2.halfCheckedKeys
  checkMenuList.value = [...checkedKeys, ...halfCheckedKeys]
}

//数据回显,data.hasIds就是接口返回选中的树节点id集合
        //菜单树数据
        menuVos.value = data.menuVos
        //数据回显操作
        nextTick(() => {
          const arr: any = []
          data.hasIds.forEach((item: any) => {
            if (
              !elTreeRef.value?.getNode(item).childNodes ||
              !elTreeRef.value?.getNode(item).childNodes.length
            ) {
              arr.push(item)
            }
          })
          roleForm.menuIds = arr
          elTreeRef.value?.setCheckedKeys(arr)
        })
相关推荐
江拥羡橙17 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
暮之沧蓝19 小时前
Vue总结
前端·javascript·vue.js
excel20 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
zero13_小葵司21 小时前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
羊羊小栈1 天前
基于「YOLO目标检测 + 多模态AI分析」的光伏板缺陷检测分析系统(vue+flask+模型训练+AI算法)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
光影少年1 天前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿1 天前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
西洼工作室1 天前
Vue CLI为何不显示webpack配置
前端·vue.js·webpack
程序员王天1 天前
【开发AGIC】Vue3+NestJS+DeepSeek AI作业批改系统(已开源)
vue.js·ai编程·nestjs
昔冰_G1 天前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件