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

相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 天前
JavaScript 作用域
前端·javascript
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试