element的Table表格组件树形数据与懒加载简单使用

目录

  • 1. 代码实现
  • 2. 效果图
  • 3. 解决新增、删除、修改之后树节点不刷新问题。([参考文章](https://blog.csdn.net/weixin_41549971/article/details/135504471))

1. 代码实现

<template><div><!-- lazy 是否懒加载子节点数据 --><!-- load 加载子节点数据的函数,lazy 为 true 时生效,函数第二个参数包含了节点的层级信息 --><!-- :default-expand-all="defaultExpandAll" 是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效  --><!-- expand-row-keys 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。 --><!-- row-click 当某一行被点击时会触发该事件 --><!-- expand-change 当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded)	 --><el-table ref="tableRef" :data="deptList" row-key="deptId" :lazy="true" :load="load":tree-props="{ children: 'children', hasChildren: 'existSub' }" :expand-row-keys="expandRowKeys"@row-click="(row, column, e) => clickRowLoad(row, column, e)" @expand-change="handleExpandChange"><el-table-column prop="deptName" label="名称" min-width="260" /><el-table-column prop="orderNum" label="排序" /><el-table-column label="创建时间" align="center" prop="createTime" min-width="200"><template slot-scope="scope"><span>{{ (scope.row.createTime) }}</span></template></el-table-column><el-table-column label="操作" align="center" fixed="right" min-width="220"><template slot-scope="scope"><el-button size="mini" type="primary" @click.stop="clickHandle(scope.row)">查看</el-button></template></el-table-column></el-table></div>
</template><script>export default {name: "TablePage3",data() {return {// 模拟数据1deptList_01: [{"createTime": "2023-10-23 11:39:03","deptId": 2104,"deptName": "部门1","parentName": null,"parentId": 0,"orderNum": 0,"children": [],"existSub": true,},{"createTime": "2023-10-23 11:39:03","deptId": 2105,"deptName": "部门2","parentName": null,"parentId": 0,"orderNum": 1,"children": [],"existSub": true,},{"createTime": "2023-10-23 11:39:03","deptId": 2106,"deptName": "部门3","parentName": null,"parentId": 0,"orderNum": 2,"children": [],"existSub": false,}],// 模拟数据2deptList_02: [{"createTime": "2023-10-23 11:39:03","deptId": 21041,"deptName": "部门1-1","parentName": null,"parentId": 2104,"orderNum": 1,"children": [],"existSub": false,},{"createTime": "2023-10-23 11:39:03","deptId": 21042,"deptName": "部门1-2","parentName": null,"parentId": 2104,"orderNum": 1,"children": [],"existSub": false,},],// 模拟数据3deptList_03: [{"createTime": "2023-10-23 11:39:03","deptId": 21051,"deptName": "部门2-1","parentName": null,"parentId": 2105,"orderNum": 1,"children": [],"existSub": true,},],// 模拟数据4deptList_04: [{"createTime": "2023-10-23 11:39:03","deptId": 210511,"deptName": "部门2-1-1","parentName": null,"parentId": 21051,"orderNum": 1,"children": [],"existSub": false,},],// 部门表格树数据deptList: [],// 重新渲染表格状态refreshTable: true,//父级的IdparentId: '',expandRowKeys: [],};},mounted() {// 列表this.getList()},methods: {/** 查询列表 懒加载 */getList() {//根据实际项目调用接口// lazyList(this.queryParams).then(response => {//     console.log(response, 'response查询列表')//     this.deptList = response.data// }) // 模拟数据1this.deptList = this.deptList_01;this.deptList.forEach(item => {item.hasChildren = item.existSub})// 如果只是单纯的更新绑定的数据:是在重新加载时,清空对应ref下的这两个数据// this.$set(this.$refs["tableRef"].store.states, "lazyTreeNodeMap", {});// this.$set(this.$refs["tableRef"].store.states, "treeData", {});console.log(this.deptList, ' this.deptList')// ------------触发点击事件load------------------//一、-------默认展开了deptList的第一层所有数据的下级数据--------// 一、-------默认展开了deptList的第一层所有数据的下级数据(相当于自动点击了一次)--------this.openTreeHandle(this.deptList)//二、 展开所有行,(建议直接使用非懒加载,配置default-expand-all为true)},// 点击列表懒加载load(tree, treeNode, resolve) {console.log(tree, 'tree')// console.log(treeNode, 'treeNode')//根据实际项目调用接口,获取对应的下级数据// this.parentId = tree.deptId// lazyList(this.queryParams).then(res => {// console.log(res.data, 'res.data')// resolve(res.data)// })// 模拟数据2,模拟数据3, 模拟数据4let tempList = []if (tree.deptName == '部门1') {tempList = this.deptList_02} else if (tree.deptName == '部门2') {tempList = this.deptList_03} else if (tree.deptName == '部门2-1') {tempList = this.deptList_04}resolve(tempList)},// 一、-------根据接口得到deptList,根据实际需要获取需要展开的节点的id,也就是table绑定的row-key属性值(如deptId)--------openTreeHandle(deptList) {const deptId = deptList ? deptList.map(item => (item.deptId).toString()) : []// expandRowKeys 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组// 这个必须配置,只有配置了这个,getElementsByClassName才能获取到对应的数据els,下面click事件才会触发this.expandRowKeys = this.expandRowKeys.concat(deptId)console.log(this.expandRowKeys, ' this.expandRowKeys')const els = document.getElementsByClassName('el-table__expand-icon el-table__expand-icon--expanded')this.$nextTick(() => {console.log(els, 'els')console.log(els.length, 'els.length')if (els.length > 0) {for (let i = 0; i < els.length; i++) {els[i].click()}}})},// 展开改变触发函数,只展开一行handleExpandChange(row, expandedRows) {// console.log(row, 'row')// console.log(expandedRows, 'expandedRows')if (expandedRows.length > 1) {this.$refs.tableRef.toggleRowExpansion(expandedRows[0])}},//点击整行load (能够点击一行的任意位置都可以进行伸缩)clickRowLoad(r, c, e) {if (e.currentTarget && e.currentTarget.firstElementChild.firstElementChild.firstElementChild) {console.log(e.currentTarget, 'e.currentTarget')if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName == 'DIV') {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click()} else {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click()}}},clickHandle(row) {console.log(row, '点击')},},
};
</script>

2. 效果图

在这里插入图片描述

3. 解决新增、删除、修改之后树节点不刷新问题。(参考文章)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/610844.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

美信科技盘古信息智能车间项目成功验收,打造电子元器件数字化工厂标杆

作为一家深耕于磁性元器件领域近二十年的制造企业&#xff0c;广东美信科技股份有限公司&#xff08;以下简称“美信科技”&#xff09;始终秉承着“为电磁赋能&#xff0c;创工业至美”的企业使命&#xff0c;为中国制造卓越发展贡献力量。在当今数字化时代&#xff0c;制造企…

代码随想录算法训练营第二天| 977 有序数组的平方 209 长度最小的子数组 59 螺旋矩阵 ||

目录 977 有序数组的平方 209 长度最小的子数组 59 螺旋矩阵 || 977 有序数组的平方 先使数组存储递减序列&#xff0c;最后反转数组使其非递减 class Solution { public:vector<int> sortedSquares(vector<int>& nums) {int l 0,r nums.size() - 1;vecto…

【C++】深入了解构造函数之初始化列表

目录 一、再谈构造函数 1、引入 1&#xff09;构造函数体赋值 2&#xff09;不同成员变量赋值 2、初始化列表 一、再谈构造函数 1、引入 1&#xff09;构造函数体赋值 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合适的初始值…

世邦spon IP网络对讲广播系统任意文件上传漏洞

产品介绍 世邦通信IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 漏洞描述 spon IP网络对讲广播系统存在任意文件上传漏洞&#xff0c;攻击者可以通过构造特殊请求包上传恶意后门文件&#xff0c;从…

深入理解 Flink(一)Flink 架构设计原理

大数据分布式计算引擎设计实现剖析 MapReduce MapReduce 执行引擎解析 MapReduce 的组件设计实现图 Spark 执行引擎解析 Spark 相比于 RM 的真正优势的地方在哪里&#xff1a;&#xff08;Simple、Fast、Scalable、Unified&#xff09; DAG 引擎中间计算结果可以进行内存持…

掌握设计模式:深入了解命令模式的优雅调度与行为解耦

命令模式是一种行为设计模式&#xff0c;其目的是将请求发送者和接收者解耦&#xff0c;从而允许发送者发送请求&#xff0c;而无需知道请求的具体处理方式。在命令模式中&#xff0c;请求被封装为一个对象&#xff0c;这个对象包含了执行请求所需的所有信息&#xff0c;包括调…

spring源码解析(六)

bean对象的初始化及销毁时&#xff0c;执行相关操作的几种方式。 package com.test;import org.springframework.beans.factory.DisposableBean; import org.springframework.beans.factory.InitializingBean; import org.springframework.context.annotation.AnnotationConfi…

解析器:request.body、request.POST、request.data

request.POST与request.body&#xff1a; django中的request.POST只能取到Content-Type(请求头)为application/x-www-form-urlencoded(form表单默认格式)的数据&#xff0c;如果请求头为application/json(json格式)&#xff0c;multipart/form-data(文件)等格式无法取到&#x…

5个你不能错过的在线教育开源项目

教育行业的蓬勃发展使得数字化教育成为一种日益受欢迎的趋势。在这个信息时代&#xff0c;小程序已经成为许多企业加速应用上线的理想选择。开源项目更是为教育行业的创业者和开发者提供了宝贵的资源&#xff0c;不仅能够降低开发成本&#xff0c;还能够快速搭建起强大的教育应…

Perfetto 使用 笔记

抓取命令 抓取 adb shell perfetto -o /data/misc/perfetto-traces/trace_file.perfetto-trace -t 10s sched freq idle am wm gfx view binder_driver hal dalvik camera input res memory导出命令 adb pull /data/misc/perfetto-traces/trace_file.perfetto-trace打开工具…

完全可降解支架行业分析:2025 年将达到3.444亿美元

完全可降解支架&#xff0c;也称为生物可吸收支架&#xff0c;是医疗器械市场上相对较新的发展。这些支架由会随着时间的推移分解并被人体吸收的材料制成&#xff0c;从而无需在达到其目的后进行手术移除。 市场分析&#xff1a;完全可降解支架的全球市场预计在未来几年将显着增…

LeetCode[102] [107] 二叉树层序遍历

Description&#xff1a;给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。解法&#xff1a; vector<vector<int>> levelOrder(TreeNode* root) {vector<vector<int>…

世邦通信SPON IP网络对讲广播系统未授权访问

产品介绍 世邦通信SPON IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 漏洞描述 spon IP网络对讲广播系统getuserdata.php存在未授权访问漏洞&#xff0c;攻击者可通过该漏洞在服务器端读取账户密码…

软件工程各种图

参考视频&#xff1a; 6 分钟学会 UML 类图_哔哩哔哩_bilibili 5 分钟学会 UML 时序图&#xff08;顺序图、序列图&#xff09;_哔哩哔哩_bilibili 3 分钟学会 UML 活动图_哔哩哔哩_bilibili 6 分钟学会 UML 用例图_哔哩哔哩_bilibili 是真的讲的非常好&#xff01;&#…

Aloha 机械臂的学习记录3——AWE:Pycharm运行代码记录

之前的博客创作了三偏关于Aloha_AWE的liunx终端指令运行代码的示例: Aloha 机械臂的学习记录——AWE&#xff1a;Bimanual Simulation Suite: https://blog.csdn.net/qq_54900679/article/details/134889183?spm1001.2014.3001.5502 Aloha 机械臂的学习记录1——AWE&#x…

Python 与 PySpark数据分析实战指南:解锁数据洞见

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 数据分析是当今信息时代中至关重要的技能之一。…

【Spring Data JPA】根据动态查询条件、根据经纬度距离查询

根据动态条件 Query(nativeQuery true, value "select A.* " "from epidemic_case_info A where A.delete_flag 0 " "and (case " "when right(:distCode, 4) 0000 then A.dist_code like concat(substring(:distCode, 1, 2 ), %) &qu…

阿里云服务器被DDoS攻击怎么办

为了保证正常的网络服务&#xff0c;许多公司和组织都选择使用高效稳定的云服务器。然而&#xff0c;在互联网上的任何服务器都可能遭受DDoS攻击。DDoS攻击是一种臭名昭著的网络攻击&#xff0c;它旨在使网络服务器不可用&#xff0c;阻止合法用户访问网站以及其他网络服务。阿…

免费运维工具测评——深入使用牧云主机管理助手

作为一名运维&#xff0c;宝塔&#xff0c;Nezha 监控面板&#xff0c;WinSCP&#xff0c;Termius 都用过了&#xff0c;谈一下自己的感受&#xff1a; 安装绑定 微信扫码可直接登录&#xff0c;主页简洁清晰&#xff0c;即使是个人体验版也没有任何广告。 只需要复制命令在服…

基于神经网络的手写汉字提取与书写评分系统研究

相关源码和文档获取请私聊QQ:3106089953 论文目录结构 目 录 摘 要 I Abstract II 目 录 IV 第1章 绪论 1 1.1. 研究背景与意义 1 1.2. 国内外研究现状 2 1.2.1. 文本定位技术研究现状 2 1.2.2. 手写汉字识别研究现状 3 1.2.3. 汉字书写质量评价方法研究现状 4 1.3. 本文所做工…