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)
        })
相关推荐
匹马夕阳2 分钟前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?3 分钟前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
沈梦研7 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
轻口味8 小时前
Vue.js 组件之间的通信模式
vue.js
fmdpenny10 小时前
Vue3初学之商品的增,删,改功能
开发语言·javascript·vue.js
涔溪11 小时前
有哪些常见的 Vue 错误?
前端·javascript·vue.js
亦黑迷失13 小时前
vue 项目优化之函数式组件
前端·vue.js·性能优化
计算机-秋大田13 小时前
基于SpringBoot的高校教师科研的设计与实现(源码+SQL脚本+LW+部署讲解等)
java·vue.js·spring boot·后端·课程设计
eason_fan13 小时前
分析vue3源码23(异步组件实现)
vue.js·前端框架·源码阅读
BigData-016 小时前
vue视频流播放,支持多种视频格式,如rmvb、mkv
前端·javascript·vue.js