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

element ui 添加自定义方法

今天在修改 el-table 源码过程中遇到一个头大的问题,原本修改编译后,将 element的子目录lib下的文件复制到项目的响应目录里就可以了,但是,这次不知为何,编译老是出问题,实在没有办法,我就直接修改项目中 node_modules 目录下的 lib 的文件。
为了找到正确的修改点,在代码中加入了以下代码,方便进入跟踪模式,知道进入 el-table 的代码的入口:

    debuggerthis.$refs.table.doLayout()

运行时,在单步执行 doLayout 方法后,就能知道 doLayout 的代码入口文件和位置,这样就可以在相同位置,插入自己的代码。
我需要实现的效果是通过代码来实现表格过滤的效果,即模拟点击列头选择某个过滤值实现表格过滤的效果。通过上述代码跟踪,了解到需要在element-ui.common.js文件中插入代码,具体代码如下:

    execFilter: function execFilter(column, filteredValue) {this.store.commit('filterChange', {column: column,values: filteredValue});this.store.updateAllSelected();},

上述代码中,为何通过 filterChange 来实现过滤,是通过关键字搜索 + 阅读代码分析得到。
在这之前,通过对 el-table 原本的过滤实现的代码进行跟踪,将 filterChange 方法的 column 和 fliteredValue 参数值进行截图保存,发现 column 不是 el-table-column,而是一个 javascript 对象,故通过对 el-table-column 对象的属性进行排查,发现 columnConfig 属性的值就是该方法所需数据,而 filteredValue 的值是一个包含过滤值的数组,为此,构建了如下调用代码:

    var column = this.$refs.companyColumn;var filteredValue = [this.$refs[this.refName][0].companyBriefName]this.$refs.table.execFilter(column.columnConfig, filteredValue)

经过测试,非常完美的解决了问题。

http://www.lryc.cn/news/303202.html

相关文章:

  • Hive UDF
  • python Opencv 中绘制图
  • imazing软件安全吗?2024中文永久免费许可证
  • JavaScript:防抖与节流
  • 在Win系统部署WampServer并实现公网访问本地服务【内网穿透】
  • 面试经典150题——单词规律
  • RK3568平台开发系列讲解(Linux系统篇)container_of
  • 回显服务器
  • c#,dotnet, DataMatrix 类型二维码深度识别,OCR,(基于 Halcon)
  • 亿道丨三防平板电脑厂商哪家好丨麒麟系统三防平板PAD
  • 什么是hash冲突?以及解决方案
  • C# CAD交互界面-模态窗体与非模态窗体调用方式
  • 19个Web前端交互式3D JavaScript框架和库
  • PaddleSeg分割框架解读[01] 核心设计解析
  • 新鲜出炉:小巧优雅的 css-in-js库StyledFc
  • Python编程实验四:函数的使用
  • SVN服务备份
  • FIDO2入门以及相关概念 Client to Authenticator Protocol
  • Linux系统入门:嵌入式系统的操作系统选型
  • 数据结构——时间复杂度
  • 《剑指Offer》笔记题解思路技巧优化 Java版本——新版leetcode_Part_5
  • ubuntu上安装docker
  • 【Docker】Linux主机部署Docker
  • vue前端docx库生成word表格 并合并单元格的例子
  • FastGPT配置文件及OneAPI程序:
  • Positive Semidefinite Matrices 什么是半正定矩阵?(undone)
  • shapely 笔记:STR TREE
  • neo4j常用代码
  • OpenAI划时代大模型——文本生成视频模型Sora作品欣赏(五)
  • Less预处理器教程