element ui 添加自定义方法

今天在修改 el-table 源码过程中遇到一个头大的问题,原本修改编译后,将 element的子目录lib下的文件复制到项目的响应目录里就可以了,但是,这次不知为何,编译老是出问题,实在没有办法,我就直接修改项目中 node_modules 目录下的 lib 的文件。

为了找到正确的修改点,在代码中加入了以下代码,方便进入跟踪模式,知道进入 el-table 的代码的入口:

javascript 复制代码
    debugger
    this.$refs.table.doLayout()

运行时,在单步执行 doLayout 方法后,就能知道 doLayout 的代码入口文件和位置,这样就可以在相同位置,插入自己的代码。

我需要实现的效果是通过代码来实现表格过滤的效果,即模拟点击列头选择某个过滤值实现表格过滤的效果。通过上述代码跟踪,了解到需要在element-ui.common.js文件中插入代码,具体代码如下:

javascript 复制代码
    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 的值是一个包含过滤值的数组,为此,构建了如下调用代码:

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

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

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询