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

news/2024/7/24 2:11:40 标签: vue.js, elementui, javascript

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


http://www.niftyadmin.cn/n/5477764.html

相关文章

RobotFramework测试框架(7)-SeleniumLibrary常用关键字

浏览器操作 打开浏览器 Open Browser urlhttps://www.baidu.com browseredge关闭浏览器 Close Browser最大化浏览器 Maximize Browser Window设置浏览器宽高 Set Window Size 800 600刷新页面 Reload Page iframe操作 选中指定iframe Select Frame loc…

【Spring Security】1.Spring Security介绍 功能介绍

文章目录 一、Spring Security介绍二、功能介绍 一、Spring Security介绍 官方文档&#xff1a;https://docs.spring.io/spring-security/reference/index.html 官网解释&#xff1a;Spring Security 是一个提供 身份验证、授权 和 针对常见攻击的保护 的框架。 它为 保护命令…

第十三届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组 题解

VP比赛链接 : 数据加载中... - 蓝桥云课 1 . 九进制 转 十进制 直接模拟就好了 #include <iostream> using namespace std; int main() {// 请在此输入您的代码int x 22*92*81*9;cout << x << endl ;return 0; } 2 . 顺子日期 枚举出每个情况即可 : …

网络:TCP、UDP协议

目录 netstat pidof xargs UDP协议 TCP协议 setsockopt函数 确认应答机制 超时重传机制 流量控制 滑动窗口 拥塞控制 延迟应答 捎带应答 面向字节流 粘包问题 在TCP/IP协议中, 用 "源IP", "源端口号", "目的IP", "目的端口号…

基于OT与CRDT协同算法的文档划词评论能力实现

基于OT与CRDT协同算法的文档划词评论能力实现 当我们实现在线文档平台时&#xff0c;划词评论的功能是非常必要的&#xff0c;特别是在重文档管理流程的在线文档产品中&#xff0c;文档反馈是非常重要的一环&#xff0c;这样可以帮助文档维护者提高文档质量。而即使是单纯的将…

[Java、Android面试]_15_Android为什么使用Binder?

Android为什么使用Binder&#xff1f;用 Linux原有的IPC不行吗&#xff1f; 本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&#xff0c;每天…

01 Php学习:导学篇

Php是什么&#xff1f; PHP 是服务器端脚本语言。 PHP&#xff08;Hypertext Preprocessor&#xff09;是一种通用开源脚本语言&#xff0c;主要用于服务器端开发。PHP脚本在服务器端执行&#xff0c;生成动态网页内容或执行服务器端任务。PHP可以嵌入到HTML中&#xff0c;也…

【c++leetcode】1. Two Sum

问题入口 遍历一遍哈希表: O(n) class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int, int> numMap;for (int i 0; i < nums.size(); i){int complement target - nums[i];if(numMap.count(complemen…