ElementUi如何使用slot="header"？

Question

1，ElementUI想自定义表头，按官方搞成这样子了

  <el-table :data="tableData" stripe border highlight-current-row  class="drag_table" style="width: 100%;margin-top:20px;">
          <el-table-column v-for="(item, index) of tableHeader" :prop="item" :label="item" :key="index"
                           :column-key="index.toString()"  >
            <template slot="header" slot-scope="slot">
                {{ slot }}
            </template>


          </el-table-column>

        </el-table>

我想问的是，如何取得注入的值，比如我想定义的头是 xx+原header lable,如何实现？

Answer 1

楼主解决了吗，用插槽怎么做啊，用楼上的render或者jsx写总有一些小bug

Answer 2

为什么我用<template slot="header" slot-scope="slot"></template>这种方式显示不出来，element-ui上的例子直接拷贝下来都不行。还需要什么条件么？还是跟element-ui的版本有关？

Answer 3

自定义表头的话 你可以参考这种形式

    <el-table-column
      label="自定义显示字段"
      minWidth="250"
      :render-header="customFieldColumn"
      prop="value">
    </el-table-column>

methods: {
    customFieldColumn (h, { column, $index }) {
      return (
        h('span', [
          h('span', column.label + ' '),
          h('el-tooltip', {
            props: {
              effect: 'light',
              content: '可在右上角（更多操作 - 自定义字段设置）中配置！',
              placement: 'top'
            }
          }, [
            h('i', {
              class: 'el-icon-question'
            })
          ])
        ])
      )
    }
}