vue 动态表头实现

HTML：

    <el-table
                        :header-cell-style="{'text-align':'center',background:'#e4e4e8',color:'#646E92'}"
                        :cell-style="{'text-align':'center'}"
                        style="color: #666E92;margin-top: 20px"
                        :data="tableData"
                        border
                        height='calc(100vh - 390px)'>
                    <template v-for="(col,index) in columns"> <!--表头数据  -->
                        <af-table-column
                                :show-overflow-tooltip="true"
                                :prop="col.name"
                                :label="col.name"
                                :key="col.id"
                                :render-header="renderHeader"   
                        >
                        </af-table-column>

                    </template>
                </el-table>

用render函数渲染，可以添加标签样式

方法：

   renderHeader(h, data) {
                var column=data.column;
                var index=data.$index;
                // h 是一个渲染函数       column 是一个对象表示当前列      $index 第几列
                return h("div", [
                    h("span", this.columns[index].name + "  ", { //这个是表头显示的值
                        align: "center",
                        marginTop: "10px"
                    }),
                    h(
                        "el-popover",  //弹框容器
                        {
                            props: { //属性
                                placement: "top-start",    // 一般 icon 处可添加浮层说明，浮层位置等属性
                                width: "160",
                                trigger: "hover"
                            }
                        },

                        [
                            h("span",  this.columns[index].description?'描述内容：'+this.columns[index].description:'暂无描述信息', {   //弹框显示内容
                                class: "text-align: center; margin: 0",
                            }),
                            h("i", {               // 生成 i 标签 ，添加icon 设置 样式，slot 必填
                                class: "el-icon-question",
                                slot: "reference"
                            })
                        ]
                    )
                ])

显示值和描述值，可以使用表头数组利用得到表头data的下标来取

表头显示值和弹框显示值 根据具体需求放，我这里是放了同数组的表头描述

end！