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)
        })
相关推荐
sunn。3 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
Heidi__5 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
夏之小星星6 小时前
element-ui自制树形穿梭框
前端·javascript·ui·elementui·vue
Monly218 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
工业互联网专业9 小时前
基于springboot+vue的二手车交易系统
java·vue.js·spring boot·毕业设计·源码·课程设计·二手车交易系统
前端小趴菜0510 小时前
记录 vue-router访问 / 路径直接重定向到有权限的第一个菜单
前端·javascript·vue.js
Eva21566511 小时前
Flask+Vue构建图书管理系统及Echarts组件的使用
vue.js·flask·echarts
艾克马斯奎普特13 小时前
Vue.js 3 渐进式实现之响应式系统——第六节:嵌套的 effect 与 effect 栈
前端·vue.js
fayeyoko14 小时前
vue如何实现触摸板双指滑动(非长按滑动)
vue.js
醋醋14 小时前
vue2源码记录(2)
前端·vue.js