vue表格表头添加按钮

实现以下效果：

 

 

 vue-html

        <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="p_id" label="项目ID" width="100" v-if="visible">
            </el-table-column>
            </el-table-column>
            <el-table-column prop="p_name" label="项目名称" width="120" >
            </el-table-column>
            <el-table-column prop="p_status" label="状态" width="100" :formatter="formatStatus" >
            </el-table-column>
            <el-table-column prop="p_creator" label="创建人" width="100" >
            </el-table-column>
            <el-table-column prop="create_time" label="创建日期" width="120" :formatter="formatDateDMT" >
            </el-table-column>
            <el-table-column prop="p_desc" label="描述" min-width="180" >
            </el-table-column>
            <el-table-column label="操作" :render-header="renderHeader" width="150">
                <template scope="scope">
                    <el-button type="warning" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDel(scope.$index, scope.row)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>

下面实现表头增加按扭; 需要自定义渲染表头

            // 表头操作栏按钮
             renderHeader(h, params) {
                let a =  [
                    h('el-button-group',[
                        // 文字提示
                        h('el-tooltip',{
                            props: {
                                disabled: false,
                                content: "增加测试用例",
                                placement: "bottom",
                                effect: "light"

                            },
                        },
                        [
                            // 增加按钮
                            h('el-button', {
                                props: {
                                    size: "mini",
                                    type: "primary",
                                    icon: "el-icon-add-location"
                                },
                                on: {
                                    click: () => {
                                        this.renderAddRow();
                                    }
                                }
                            })
                        ]),
                        
                        h('el-tooltip',{
                            props: {
                                disabled: false,
                                content: "全局变量",
                                placement: "bottom",
                                effect: "light"                                
                            }
                        },
                        [
                            // 全局变量按钮
                            h('el-button', {
                                props: {
                                    size: "mini",
                                    type: "primary",
                                    icon: "el-icon-share"
                                },
                                on: {
                                    click: () => {
                                        this.renderAddRow();
                                    }
                                }
                            }),
                        ]),
                        h('el-tooltip',{
                            props: {
                                disabled: false,
                                content: "系统函数",
                                placement: "bottom",
                                effect: "light"                                
                            }
                        },
                        [
                            // 系统函数按钮
                            h('el-button', {
                                props: {
                                    size: "mini",
                                    type: "primary",
                                    icon: "el-icon-share"
                                },
                                on: {
                                    click: () => {
                                        this.renderAddRow();
                                    }
                                }
                            }),
                        ]),
                    ])
                ]
                return h('div', a);
            },

这里要解释的是h()这个相当于创建个虚拟的dom，执行时创建。

h('div', {}, [])可以有三个参数(标签，标签属性定义， 嵌套标签)  可省略

举例：

h('el-button-group',{}, [
　　h('el-button', {
　　　　type: "primary",
　　　　icon: "el-icon-edit",
　　}),
])

<el-button-group> <el-button type="primary" icon="el-icon-edit"></el-button> </el-button-group>

以上两个结果是相等的。