Element-ui自定义表头,render-header+Scoped slot

Scoped slot

Element-ui 版本2.13.2 Table 组件中，可以通过设置 Scoped slot 来自定义表头。

:render-header

低版本的Table 并不支持Scoped slot,但是el-table-column提供了render-header属性，官方介绍：

//列标题 Label 区域渲染使用的 Function
Function(h, { column, $index })

参数h

h(param1, param2, param3)
param1: 元素的标签名
param2: 对象，里面是一些class等属性
param3: 数组，包含的子组件

样例

data() {
  return {
  }
},
methods: {
  renderHeader(h, {column}){
        return h(
                   'div',{
                           style: 'margin-left: 10px;',
                   },[
                         h('el-button', {
                             style: 'margin-left: 5px;',
                             on: {
                                 click: ()=>{
                                     this.changeA()
                                 }
                             }
                         },[
                             column.label
                         ]),
                   ])
  },
}

效果

a.png

补充

MessageBox用法

MessageBox.confirm(
  h('div', null, [
    h('p',{style:'font-size:18px'},'請注意：'),
  ]),
  '', {
    cancelButtonText: this.$t('iphone.cancel'),
    confirmButtonText: this.$t('iphone.confirm'),
    customClass: 'tips_info',
    cancelButtonClass: 'tips_cancel',
    closeOnClickModal: false
 }).then((d)=>{}).cache((err)=>{})

结束语

应该迭代版本