iview table column中renderHeader是如何是实现传 h 进来的

iview table column中renderHeader是如何是实现传 h 进来的 ?

查看的table-head.vue 中调用 column的 renderHeader的方法,只传了两个参数 column、 $index, 可是为什么在iview提供的文档中确变成了不一样的参数 ( 第一个是 h,第二个为对象,包含 column 和 index,分别为当前列数据和当前列索引。)

求解

clipboard.png

clipboard.png

clipboard.png

阅读 16.5k
2 个回答

查看iview table .vue 源码,查看到了iview对此进行了封装。

vue 调用render 时候,传进来的,有些事情是框架做了
下面这样是不是好理解一点

class App {
  render(h,arg){
    h(arg.a,arg.b)
  }
}

const add= (a,b)=>{
  console.log(a+b)
}

let app = new App()
app.render(add,{
  a:1,
  b:2
})

从来没有用过iView 我看了一下iView文档,iView 的table 提供了两个自定义函数,一个render() 一个renderheader()
其中
render() 是用来自定义表格中列表项的自定义显示
renderheader() 是用来自定义表格中表头的自定义显示

图片描述

这里的图标是render() 加上去的代码如下

render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        },

图片描述

这里两个图标是通过renderheader()加上去的

renderHeader:(h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'alert'
                                    }
                                }),
                                h('strong', params.column.title)
                            ]);
                        },

完整代码:https://jsfiddle.net/papersna...

至于为什么你看iView的源码看不到 h传入过程

因为你看错了,这是master分支的代码,但你看的是2.0的文档

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题