el-table自定义表头的两种方式

最新推荐文章于 2024-10-09 04:31:41 发布

超甜小布丁

最新推荐文章于 2024-10-09 04:31:41 发布

阅读量5.9k

点赞数 1

分类专栏： Vue问题文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/bu0627/article/details/127618073

版权

Vue问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方法一：

<el-table-column
      align="right">
      <template slot="header" slot-scope="{ column,$index }">
              <div class="item-top">
                <p class="gray-txt">{{ column.label }}</p>
                <el-popover
                  v-if="$index !== 0"
                  placement="top-start"
                  :title="column.label"
                  width="200"
                  trigger="hover"
                  :content="tabelPp3[$index].remark"
                >
                  <i
                    slot="reference"
                    class="iconfont icon-yiwen2222"
                    style="font-size: 16px"
                  />
                </el-popover>
              </div>
            </template>
    </el-table-column>

方法二：

<el-table :data="tableLogData" style="width: 100%" header-cell-class-name="header-cell-color">
        <el-table-column  prop="level" min-width="100"  :render-header="renderHeader"></el-table-column>
</el-table>


renderHeader(h, { column,$index }) {
            return h('div', [
                h('span', column.label),
                h(
                    'el-tooltip',
                    {
                        props: {
                            effect: 'dark',
                            content:  this.tabelPp3[$index].remark,
                            placement: 'top',
                        },
                    },
                    [
                        h('i', {
                            class: 'el-icon-question',
                            style: 'color:#409eff;margin-left:5px;',
                        }),
                    ],
                ),
            ]);
        },