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

html搭建结构

复制代码
<el-tree ref="treeRef" :data="data" show-checkbox :default-expand-all="false" node-key="id" highlight-current
        :props="defaultProps" @check="handleCheckChange" />

js

复制代码
// 编辑按钮
let Jedit = (row: any) => {
  console.log(row);
  dialogFormVisible.value = true
  adds.value = false
  edits.value = true
  charnam.value = row.name
  RoleType.value = row.type == 1 ? '超管' : row.type == 2 ? "劳务公司" : row.type == 3 ? "项目部" : "审核员"
  Mid.value = row.menus
  row.value = row.menus
  
//数据回显,row.menus_id就是接口返回选中的树节点id集合
//菜单树数据
  menuVos.value = row.menus
  //数据回显操作
  nextTick(() => {
    const arr: any = []
    row.menus_id.forEach((item: any) => {
      if (
        !treeRef.value?.getNode(item).childNodes ||
        !treeRef.value?.getNode(item).childNodes.length
      ) {
        arr.push(item)
      }
    })
    roleForm.menuIds = arr
    treeRef.value?.setCheckedKeys(arr)
  })
};

const menuVos = ref([]) //菜单树列表
const roleForm: any = reactive({})
function handleCheckChange(data1: any, data2: any) {
  // 选中的子节点
  const checkedKeys = data2.checkedKeys
  // 选中的父节点
  const halfCheckedKeys = data2.halfCheckedKeys
  checkMenuList.value = [...checkedKeys, ...halfCheckedKeys]
}

非常好用,拿过来修改一下check事件,ref获取就直接可以使用了

相关推荐
不要再敲了3 小时前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
xiaoyan20154 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation4 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation4 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州4 小时前
JavaScript中的dispatchEvent方法详解
javascript
给月亮点灯|5 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青5 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
Martin-Luo5 小时前
Vue3 通过json配置生成查询表单
javascript·vue.js·json
梦想CAD控件5 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
掘金约基奇_5 小时前
JS-SDK开发企微侧边栏
前端·javascript