el-table自定义表头的两种方式

实现效果:


示例.png

方法一:

 
      
    

需要注意的是,问号图标用了el-popover组件,鼠标触碰上去就会显示后台返回的解释文字,但是column发现拿不到除了label以外的其他数据,于是只能定义$index,从源数组里面去取

方法二:


        

renderHeader(h, { column,$index }) {
            return h('div', [
                h('span', column.label),
                h(
                    'el-tooltip',
                    {
                        props: {
                            effect: 'dark',
                            content:  this.tabelPp3[$index].remark,
                            placement: 'top',
                        },
                    },
                    [
                        h('i', {
                            class: 'el-icon-question',
                            style: 'color:#409eff;margin-left:5px;',
                        }),
                    ],
                ),
            ]);
        },

你可能感兴趣的:(el-table自定义表头的两种方式)