Scoped slot

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

<template>
  <el-table>
    <el-table-column align="center" width="180px">
      <template slot="header" slot-scope="scope">
        <el-button  class="btn" @click="add(scope.row,)">表头按钮</el-button>
      </template>
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)">内容按钮</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

: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: 数组，包含的子组件

样例

<template>
<el-table>
    <el-table-column label="表头按钮" align="center" width="180px" :render-header="renderHeader">
        <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index, scope.row)">内容按钮</el-button>
        </template>
    </el-table-column>
</el-table>
</template>

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)=>{})

结束语

应该迭代版本