位置: 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)

  • 息税前利润计算每股收益
  • 新成立的小规模纳税人怎么报印花税
  • 幼儿园经营支出指什么
  • 转账支票一定要收款人去取吗
  • 申报个税需要扣除公积金和社保吗
  • 出口不退税进项税如何处理
  • 企业所得税预缴少申报案例
  • 企业购买电话充值卡的分录
  • 银行贷款印花税是什么意思
  • 制造企业需要设哪些部门
  • 个体工商户能否开13的专票
  • 固定资产的折旧费用计入什么科目
  • 代收税款
  • 小规模纳税人开专票税率是1%还是3%
  • 结转上年度的企业所得税会计分录?
  • 非盈利组织捐赠支出
  • 增值税销项发票冲红怎么冲
  • 生产企业电费要不要计提?
  • 贷款利息增值税发票
  • 交股权印花税需要什么材料
  • 不得抵扣啥意思
  • 哪些票据可以抵扣个人所得税
  • 个人所得税有哪几种
  • 个人从上市公司取得的分红个税怎么申报
  • 详解出口退税的涵义
  • 小规模30万免税政策
  • 法人变更后的涉税问题
  • 国税局代开发票是否可代地税局征收城市维?
  • 联营 保底
  • 年末结转年初建账
  • 不良资产购买流程
  • 调整以前年度的收入怎么入账
  • linux 定时删除文件
  • PHP:Memcached::replaceByKey()的用法_Memcached类
  • 出售固定资产减按2%会计处理1%怎么处理
  • vue3的生命周期
  • wordpress相关文章
  • 什么是包装物押运
  • 领料单出库单区别
  • 浏览器集成什么意思
  • 蓝桥杯第十四届模拟赛第三期
  • 用more命令查看文件内容
  • 固定资产折旧四种方法公式
  • 营改增前取得的有形动产为标的物
  • 合伙企业的经营所得税率
  • mongodb性能优化方案有哪些?
  • SQL Report Builder 报表里面的常见问题分析
  • 工人意外伤害保险
  • 什么时候过路费减半收费
  • 固定资产折旧常见方法
  • Mysql获取当前年份
  • sqlserver数据库中进行查询所使用的语言为
  • 旅行社开具的发票
  • 出口转内销会计分录举例
  • 业务员垫付保费
  • 测试费几分钱入账
  • 固定资产清理费用账务处理
  • 工程结算与开票的关系
  • sql判断字段是否包含数字和字母
  • sql server的介绍
  • 重装机兵
  • win7 64位运行软件提示MSCOMCTL.OCX丢失或无效该怎么办?
  • 解决windows update问题
  • 电脑开机时出现红色三角形
  • linux进程管理实验总结
  • 为大家详细介绍英语
  • winxp任务栏消失
  • linux系统基础教程
  • Win10系统安装步骤
  • chrome浏览记录保存多久
  • jquerygrid
  • 利用css样式控制文本的字体属性是什么
  • 批处理改ipv4地址
  • js基础教程
  • 自定义圆角控件
  • java script教程
  • 电子税务局改版
  • 国税发票真伪查询手机怎么查
  • 个体诊所可以申请医保报销吗
  • 防疫物资开票免税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设