详解element ui 添加自定义方法

2024-03-01 0 753

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 添加自定义内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • vueelement-uiel-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组件中添加自定义颜色和图标的实现方法

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript 详解element ui 添加自定义方法 https://www.u-9.cn/biancheng/javascript/182334.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务