iview table render 进阶

Posted sweet-ice

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iview table render 进阶相关的知识,希望对你有一定的参考价值。

Qestion:

如何给表格添加hover 事件?

step1: 

添加 domProps 选项参数

step2: 

废话不多说,直接看demo code

render: (h, params) => 
                        let create = this.$createElement
                        let dom = create(‘div‘, 
                            ref: params.row.ref,
                            props: 
                                type: ‘text‘,
                                size: ‘small‘
                            ,
                            domProps: 
                                innerhtml: params.row.activeText
                            ,
                            attrs: 
                                class: ‘btn‘
                            ,
                            style: 
                                width: ‘100%‘,
                                height: ‘40px‘,
                                lineHeight: ‘40px‘,
                                testAlign: ‘center‘,
                                marginRight: ‘5px‘,
                                cursor: ‘pointer‘
                            ,
                            on: 
                                click: () => 
                                    this.operate(params.row)
                                
                            
                        )
                        return dom
                    

 

以上是关于iview table render 进阶的主要内容,如果未能解决你的问题,请参考以下文章

iview 框架的 table render 填坑

iview table行render渲染不同的组件

iview 在Table组件render 中使用Poptip组件 阿星小栈

iview的table中点击Icon弹Poptip,render函数的写法

Vue+IView使用过程中使用Table组件Render不生效问题

VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题