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项目整合
前端·javascript·vue.js
ct9783 小时前
组件间的通信
前端·javascript·vue.js
左手吻左脸。3 小时前
Vue 全栈面试题大全(2026 最新版最详细)
前端·javascript·vue.js
小新1104 小时前
最简单但完整的 Vue 响应式示例(一个简单的计数器按钮)
前端·javascript·vue.js
刘海不能乱165 小时前
Java JUC源码分析系列笔记-Synchronized
vue.js
whatever who cares7 小时前
Vue3中vue文件和composables的分工
前端·javascript·vue.js
薛先生_0997 小时前
vue-编程式跳转-基本跳转
前端·javascript·vue.js
码上暴富10 小时前
el-table表格全屏/管理显示字段/导出功能封装
vue.js
超人不会飞_Jay11 小时前
26.6.3Vue笔记
前端·vue.js·笔记
御坂1002711 小时前
Vue - @change应用实现下拉框联动功能
前端·javascript·vue.js