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

时间:2025-01-22 07:29:47

HTML:

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

JS:

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

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

//数据回显,就是接口返回选中的树节点id集合
        //菜单树数据
         = 
        //数据回显操作
        nextTick(() => {
          const arr: any = []
          ((item: any) => {
            if (
              !?.getNode(item).childNodes ||
              !?.getNode(item).
            ) {
              (item)
            }
          })
           = arr
          ?.setCheckedKeys(arr)
        })