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获取就直接可以使用了

相关推荐
灰海15 分钟前
原型与原型链到底是什么?
开发语言·前端·javascript·es6·原型模式·原生js
山河木马30 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina32 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者38 分钟前
天地图编辑支持删除编辑点
前端·javascript
前端小巷子1 小时前
深入理解TCP协议
前端·javascript·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好2 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人3 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君8 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡9 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript