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)
        })
相关推荐
易朵朵10 小时前
CSS 格式化上下文
css·vue.js
雪芽蓝域zzs11 小时前
第6节:远程搜索弹窗(remote 模式),弹窗滚动加载分页
vue.js·elementui
Highcharts.js12 小时前
图表开发实战总结| 7 条“黄金法则”与“性能铁律”
前端·javascript·vue.js·编辑器·时序数据库·highcharts
Wx-bishekaifayuan15 小时前
springboot陨石鉴收系统96265-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·python·spring·课程设计
FYKJ_201015 小时前
springboot家政服务平台66766-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·mysql·spark·课程设计
墨鱼老师16 小时前
Go+Gin+Vue 毕设项目:Gin 框架搭建后端基础接口实战
vue.js·golang·go·gin·前后端分离·计算机毕业设计·go 后端
ym hyd 1111 天前
试题库管理系统源码 Java+SpringBoot+Vue3 前后分离
java·vue.js·spring boot·毕设
雪芽蓝域zzs1 天前
第4节:el-select 弹窗事件控制(打开 / 关闭、选中事件、弹窗滚动事件)
vue.js·elementui
ss2731 天前
AI全栈实战 | 2.3-01 组件库实战:Element Plus 怎么搭出专业界面,过度封装为什么成维护负担
前端·javascript·elementui·vue
web打印社区2 天前
HTML5 静默打印:前端页面怎么调用打印机且尽量不弹窗
前端·javascript·vue.js·pdf·html·html5