当前位置: 首页 > news >正文

elementUi中的el-table合计行添加点击事件

elementUi 文档中,合计行并没有点击事件,这里自己实现了合计行的点击事件。

  created() {this.propertyList = [{ property: 'order', label: '序号' },{ property: 'deptName', label: '单位名称' },{ property: 'contentPublishQuantity', label: '文章数量' },{ property: 'readQuantity', label: '浏览量' },{ property: 'likeQuantity', label: '点赞量' },{ property: 'collectionQuantity', label: '收藏量' },]},mounted() {let that = thissetTimeout(() => {const footerWrapper = this.$el.querySelector('.el-table__footer-wrapper');const cells = this.$el.querySelectorAll('.el-table__footer-wrapper td .cell');// 给文章数量和收藏量添加样式let clickIndex = [2,5]if (cells.length) {cells.forEach((cell, index) => {if (clickIndex.includes(index)) {cell.style.color = '#409EFF'cell.style.cursor = 'pointer'}})}// 在合计行添加点击事件footerWrapper.addEventListener('click', (event) => {// 检查点击事件是否发生在合计行的单元格上const targetCell = event.target.closest('.el-table__cell');if (targetCell) {// 获取点击的列索引const columnIndex = Array.from(targetCell.parentNode.children).indexOf(targetCell);if (columnIndex !== -1) {console.log('当前点击项:',that.propertyList[columnIndex])}}});}, 500)},
http://www.lryc.cn/news/345165.html

相关文章:

  • Zookeeper集群搭建的一些问题
  • 【线性代数】俗说矩阵听课笔记
  • 物联网技术在数字化工厂中的应用,你知道多少?——青创智通
  • nacos开启登录开关启动报错“Unable to start embedded Tomcat”
  • Linux|了解如何使用 awk 内置变量
  • 代码随想录-算法训练营day29【回溯算法05:递增子序列、全排列】
  • 704. 二分查找
  • php回车变br、php显示br
  • 找最大数字-第12届蓝桥杯国赛Python真题解析
  • 蓝桥杯 算法提高 ADV-1170 阶乘测试 python AC
  • 阿里巴巴杭州全球总部正式启用,创新“减碳大脑”科技减碳 | 最新快讯
  • 蓝桥杯国赛练习题真题Java(矩阵计数)
  • 概念解析 | ROC曲线:评估分类模型
  • 数据可视化训练第二天(对比Python与numpy中的ndarray的效率并且可视化表示)
  • 【Java EE】数据库连接池详解
  • 正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-15.4讲 GPIO中断实验-IRQ中断服务函数详解
  • 如何平衡RPA机器人的安全性与业务敏捷性,同时不牺牲用户体验?
  • 地球行星UE5和UE4
  • 7.k8s中的名称空间namespace
  • 上海企业源代码防泄密解决方案,企业源代码防泄密如何应对?
  • 将要上市的自动驾驶新书《自动驾驶系统开发》中摘录各章片段 4
  • OpenSearch 与 Elasticsearch:7 个主要差异及如何选择
  • [Docker]容器的网络类型以及云计算
  • VMP 简单源码分析(.net)
  • 数据结构与算法学习笔记-二叉树的顺序存储表示法和实现(C语言)
  • 如何在Windows和Linux中杀死Python进程
  • 零基础怎么快速进行单细胞分析?
  • 力扣数据库题库学习(5.10日)--1965. 丢失信息的雇员
  • 漫威争锋Marvel Rivals怎么搜索 锁区怎么搜 游戏搜不到怎么办
  • SpringBoot实现统一返回值+全局异常处理