Vue -- element-ui el-table 多表头，在表头中添加按钮

<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column label="全部用户">
        <el-table-column type="selection" align="center" label-class-name="allSelection" width="80" />
        <el-table-column :render-header="renderHeader">
          <template slot-scope="scope">
            <div class="user-wrapper">
                <img :src="scope.row.photo" alt="">
                  {{ scope.row.nickName }}
            </div>
          </template>
        </el-table-column>
      </el-table-column>
</el-table>

 renderHeader(h) {
      return (
        <el-button class='filter-item' type='default' size="mini" icon='el-icon-delete' onClick={() => this.handleAddBlackList()} loading={this.changeListLoading}>加入黑名单</el-button>
      )
}

但是这种方法element-ui会提示一个报错[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.，根据提示我们使用插槽形式

<el-table-column scoped-slot>
  <template slot="header">
    <div class="px14">
      <el-button class="filter-item" type="default" size="mini" icon="el-icon-delete" :loading="changeListLoading" :disabled="disabledBtn" @click="handleRemoveBlacklist">移出黑名单</el-button>
    </div>
  </template>
  <template slot-scope="{row}">
    <div class="user-wrapper flex items-center px14">
      <div class="inline-block mr8" style="height: 36px;">
        <el-avatar :key="row.id" :size="36" :src="row.photo" />
      </div>
      <div class="pro-wrapper">{{ scope.row.nickName }}</div>
    </div>
  </template>
</el-table-column>

注意：如果使用el-avatar组件，必须定义key