iview--table自定义列头

最新推荐文章于 2023-03-16 21:30:55 发布

这么近又那么远

最新推荐文章于 2023-03-16 21:30:55 发布

阅读量1.1k

点赞数

分类专栏： vue+iview 文章标签：前端

本文链接：https://blog.csdn.net/qq_32900003/article/details/106640521

版权

vue+iview 专栏收录该内容

9 篇文章

订阅专栏

iview---table自定义列头

官方API提到renderHeader函数自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。

{ "title": "累计销售", "align": "center",
  renderHeader: (h, param) => {
    return h('div', {
        domProps: {
            innerHTML: param.column.title
        },
        style:{
            cursor:'pointer'
        },
        on: {
            click: () => { //自定义列头的点击事件
                this.allChangeAgainst(param);
            }
        }
    });
  },
  "children": [ { "title": "合计", "key": "age", "align":"center","width":"50","tooltip":"true" } ]
},