Scoped slot

Element-ui 版本2.13.2 Table 組件中，可以通過設(shè)置 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)">內(nèi)容按鈕</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

:render-header

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

//列標題 Label 區(qū)域渲染使用的 Function
Function(h, { column, $index })

參數(shù)h

h(param1, param2, param3)
param1: 元素的標簽名
param2: 對象，里面是一些class等屬性
param3: 數(shù)組，包含的子組件

樣例

<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)">內(nèi)容按鈕</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)=>{})

結(jié)束語

應(yīng)該迭代版本