位置: IT常识 - 正文

使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据(大类)以及自定义表格合计值(el-table-column formatter)

编辑:rootadmin
使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据(大类)以及自定义表格合计值 1. 使用 el-table 实现树形数据懒加载实现必需条件:lazy:load=“loadNode”:tree-props=“{ children: ‘children’, hasChildren: ‘hasChildren’ }”

推荐整理分享使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据(大类)以及自定义表格合计值(el-table-column formatter),希望有所帮助,仅作参考,欢迎阅读内容。

使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据(大类)以及自定义表格合计值(el-table-column formatter)

文章相关热门搜索词:el-table key,el-table append,el-table-column formatter,el-table-column formatter,el-table-column scope,el-table-column scope,el-table-column formatter,el-table ref,内容如对您有帮助,希望把文章链接给更多的朋友!

注意:特别是第3条,后端接口必须传给你"hasChildren"(名字可以不一样),值为 true或false,如果是根节点值为true,子节点值为false,不然数据旁边的小三角不会显示,即不能获取子节点数据

实现代码如下:<el-tablelazy:load="loadNode":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"// 点击小三角执行的方法const loadNode = (row: { [key: string]: any }, treeNode: any, resolve: any) => {if (row.level >= 1) {state.tableData.param.level = row.level + 1; //后端要求传参变化state.tableData.param.code = row.code;Query(state.tableData.param).then((response: Array<{ [key: string]: any }>) => {resolve(response);});}};>2. 点击行展开要求点击当前行也可以展开数据(之前是点击小三角才能展开)代码如下:// 使用点击事件@row-click="getOpenDetail"// 点击当前行展开节点const getOpenDetail = (row: any, column: any, e: any) => {if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName == 'DIV') {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click();} else {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click();}};3. 每次只展示一条数据要求点击根节点时,其余根结点不展开,只展开当前根节点及其对应的子节点代码如下:// 需要用到以下代码,其中 code 为数据唯一标识,与 id 作用一样row-key="code":expand-row-keys="expands"@expand-change="expandSelect"// 每次只展开一行const expandSelect = (row: { [key: string]: any }, expanded: boolean) => {if (expanded) {expands.value = [];if (row) {expands.value.push(row.code, row.code.substring(0, 2), row.code.substring(0, 4), row.code.substring(0, 6)); // 每次push进去的是每行的code和父元素的code}} else {expands.value = []; // 默认不展开}};后台数据如下:

根节点数据为code前两位数,以后的子节点数据依次加两位数

4. 自定义表格合计值要求在表格的最后一行显示数据的合计值,因为是懒加载的数据,不能自动累加显示出合计值,前端需要自己赋值代码如下:show-summary:summary-method="getSummaries"// 自定义表尾合计行const getSummaries = (param: any) => {const { columns, data } = param;const sums: string[] = [];columns.forEach((column: any, index: number) => {switch (index) {case 0:sums[index] = '合 计';break;case 2:sums[index] = state.array.allDutyCost;// state.array.allDutyCos 为后端返回已经计算好的总数值break;case 3:sums[index] = state.array.allBudgetCost;break;case 4:sums[index] = state.array.allAdjustCost;break;default:sums[index] = '——';}});

文中有错误或不懂的地方,可以留言一起讨论!

本文链接地址:https://www.jiuchutong.com/zhishi/288777.html 转载请保留说明!

上一篇:浏览器无痕浏览还能查到记录吗,如何开启无痕模式(浏览器无痕浏览后警察能查到吗)

下一篇:IDEA如何运行SSM项目(超详细图解)(idea如何运行ssm项目spring)

  • 小米30s(小米3购买)(小米30手机好不好)

    小米30s(小米3购买)(小米30手机好不好)

  • 淘宝注册时间在哪看(淘宝网注册时间)

    淘宝注册时间在哪看(淘宝网注册时间)

  • 荣耀30s能支持无线充电吗(华为荣耀30s带不带无线充电功能)

    荣耀30s能支持无线充电吗(华为荣耀30s带不带无线充电功能)

  • 显示栏隐藏怎么找回来(隐藏的栏怎么恢复)

    显示栏隐藏怎么找回来(隐藏的栏怎么恢复)

  • 荣耀9x悬浮窗怎么打开?(荣耀9x悬浮按钮)

    荣耀9x悬浮窗怎么打开?(荣耀9x悬浮按钮)

  • 网页中常见的元素有哪些(网页中常见的元素包含以下哪些)

    网页中常见的元素有哪些(网页中常见的元素包含以下哪些)

  • 进PE提示获取硬盘分区失败(进pe提示获取硬盘分区失败,可能缺少硬盘驱动)

    进PE提示获取硬盘分区失败(进pe提示获取硬盘分区失败,可能缺少硬盘驱动)

  • 网络连接超时是什么原因(网络连接超时是什么意思怎么解决)

    网络连接超时是什么原因(网络连接超时是什么意思怎么解决)

  • 抖音的作品怎么置顶(抖音的作品怎么快速删除)

    抖音的作品怎么置顶(抖音的作品怎么快速删除)

  • 怎么看爱奇艺会员账号密码(怎么看爱奇艺会员记录)

    怎么看爱奇艺会员账号密码(怎么看爱奇艺会员记录)

  • 怎么下老版本qq(怎么下老版本驱动程序)

    怎么下老版本qq(怎么下老版本驱动程序)

  • 微信云清查是什么(微信云查数据是真的吗)

    微信云清查是什么(微信云查数据是真的吗)

  • 苹果手机只有耳机有声音怎么回事(苹果手机只有耳机模式怎么办)

    苹果手机只有耳机有声音怎么回事(苹果手机只有耳机模式怎么办)

  • 大数据的关键是什么(大数据最关键的特征)

    大数据的关键是什么(大数据最关键的特征)

  • 微信语音可以闭麦么(微信语音可以闭声音吗)

    微信语音可以闭麦么(微信语音可以闭声音吗)

  • 微信消息显示在屏幕显示(微信消息显示在屏幕顶端)

    微信消息显示在屏幕显示(微信消息显示在屏幕顶端)

  • 华为mate30能不能用谷歌(华为mate30能不能玩原神)

    华为mate30能不能用谷歌(华为mate30能不能玩原神)

  • iphone能不能设置Siri性别(iphone能不能设置动态壁纸)

    iphone能不能设置Siri性别(iphone能不能设置动态壁纸)

  • iphone xs下架了嘛

    iphone xs下架了嘛

  • mate30是曲面屏吗

    mate30是曲面屏吗

  • 小米手环4为什么不显示信息(小米手环4为什么绑不上)

    小米手环4为什么不显示信息(小米手环4为什么绑不上)

  • 魅族16可以用ep31吗(魅族16可以用日本的卡么)

    魅族16可以用ep31吗(魅族16可以用日本的卡么)

  • 内存条怎么拔下来(内存条怎么拔下来视频)

    内存条怎么拔下来(内存条怎么拔下来视频)

  • msqry32.exe进程是什么文件 作用是什么 msqry32进程查询

    msqry32.exe进程是什么文件 作用是什么 msqry32进程查询

  • 鸟瞰罗卡附近的Grotta della Poesia,意大利莱切 (© Amazing Aerial Agency/Offset by Shutterstock)(罗卡购物村)

    鸟瞰罗卡附近的Grotta della Poesia,意大利莱切 (© Amazing Aerial Agency/Offset by Shutterstock)(罗卡购物村)

  • Flask实现用户登录注册(附前后端源码)(flask实现登录)

    Flask实现用户登录注册(附前后端源码)(flask实现登录)

  • 银行收取的账户管理费是什么费用
  • 什么叫销售劳务
  • 季度预缴能不能弥补亏损
  • 权益法核算的好处
  • 其他收益是否需缴税
  • 定额备用金制度有哪些
  • 代扣公积金会计怎么做账
  • 企业所得税讲解
  • 工会经费滞纳金税率
  • 4s店改装车后卖车合法吗
  • 合伙制公司有董事会吗
  • 购买办公家具合同
  • 劳务费交增值税还要交个税吗
  • 增值税 3万
  • 给员工发的慰问短信
  • 合并起来
  • 固定资产折旧在资产负债表属于什么
  • 文化建设服务费减免
  • 公积金是交当月还是上月
  • 房地产开发企业需要缴纳哪些税
  • 公司帐上欠了股东很多钱有何税务风险?
  • 增值税普通发票有什么用
  • 调研费用表格
  • windows10不会自动锁屏
  • 鸿蒙系统获取电脑文件
  • win11测试版和正式版区别
  • ecshop有哪些bug
  • 引入人工智能
  • 固定资产计算折旧时用扣除减值吗
  • 增值税逾期未申报怎么补申报
  • 个人转让土地使用权可以开专票吗
  • php 统计
  • framework在哪里打开
  • react roter
  • 购入支票号码和使用支票号码是什么
  • 发票的普票和专票什么区别
  • c语言fseek函数
  • 减值准备对当期损益的影响
  • mysql中如何设置默认值
  • 企业为职工支付的补充医疗保险费
  • sqlserver判断数字
  • 营改增后企业的税负控制
  • 固定资产是指的什么
  • 基本户收到零余额转款怎么做分录
  • 一张凭证上可以写多个摘要吗
  • 为什么借贷平台借不到钱了
  • 公司领导培训费用标准
  • 当月没认证的发票当月不用进行账务处理吗
  • 民非企业怎么给员工交五险
  • 用于研发购买的材料进项税额
  • 电子税务局申报流程
  • 农业企业纳税申报
  • 民营企业固定资产管理规定
  • mysql安装配置教程5.7.16
  • mysql里面的数据类型
  • centos占用内存高
  • service.exe是什么
  • linux的awk命令大全
  • windows 进度条
  • qcwlicon.exe - qcwlicon是什么进程 有何作用
  • windows8连wifi
  • 怎样下载电子书免费的
  • windowsxp打不开网页怎么办
  • fciv.exe
  • androidstudio更改工程名字
  • android.json
  • linux定时任务怎么立刻生效
  • node.js中实现同步操作的3种实现方法
  • 究竟什么是幸福
  • python中按下某个按键
  • JavaScript的函数中只能写一条代码语句
  • js中的?
  • 前端开发的工作流程
  • android,ios,apicloud 同时开发两个平台应用,方便简单一体化,自带svn,云编译,中文IDE
  • 国家个税app讨要工资流程怎么操作
  • 1988年中华人民共和国印花税票五元
  • 湖南地税电话号码
  • 国税车购税征收标准
  • 四川投诉电话查询
  • 税务会计业务处理流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设