详解elementui添加自定义方法，
详解elementui添加自定义方法，
element ui 添加自定义方法
今天在修改 el-table 源码过程中遇到一个头大的问题，原本修改编译后，将 element的子目录lib下的文件复制到项目的响应目录里就可以了，但是，这次不知为何，编译老是出问题，实在没有办法，我就直接修改项目中 node_modules 目录下的 lib 的文件。
为了找到正确的修改点，在代码中加入了以下代码，方便进入跟踪模式，知道进入 el-table 的代码的入口：
debugger
this.$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)
经过测试，非常完美的解决了问题。
补充：
elementUI 事件添加自定义参数，以及子组件emit传参 父组件增加自定义参数
一、elementUI 事件添加自定义参数
@visible-change="val => dropDownOpen(val, 自定义参数) ，val为事件默认返回的参数
<el-dropdown size="small" trigger="hover" @visible-change="val => dropDownOpen(val, index)">
二、子组件emit传参 父组件增加自定义参数
情况：父组件循环子组件时，除子组件传出来的参数，还想要拿到循环的index
父组件：
<div v-for='(item,index) in list' :ket='index'>
<child @testFun='testFun'><child>
</div>
子组件：
<div @clicl='chilfFun'>测试数据<div>
js：
chilfFun(){
this,$emit('testFun','canshu')
}
解决：<child @testFun=‘e=》testFun（自定义的参数）’>
<div v-for='(item,index) in list' :ket='index'> <child @testFun='e=》testFun（index）'><child> </div>
到此这篇关于element ui 添加自定义方法的文章就介绍到这了,更多相关element ui 添加自定义内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！
您可能感兴趣的文章:- vue element-ui el-table组件自定义合计(summary-method)的坑
- 图文详解Element-UI中自定义修改el-table样式
- elementui使用el-upload组件如何实现自定义上传
- ElementUI中利用table表格自定义表头Tooltip文字提示
- Vue Element UI自定义描述列表组件
- Vue+element-ui添加自定义右键菜单的方法示例
- Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
- Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
- vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
- vue elementUI table 自定义表头和行合并的实例代码
- element-ui 的el-button组件中添加自定义颜色和图标的实现方法