vue表格表头添加按钮
实现以下效果：
vue-html
<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" >
<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, w)" circle></el-button>                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDel(scope.$index, w)" circle></el-button>                </template>
</el-table-column>
</el-table>
下⾯实现表头增加按扭; 需要⾃定义渲染表头
// 表头操作栏按钮
renderHeader(h, params) {
html实现用户注册登录代码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: () => {
}
}
})
]),
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: () => {
}
}
}),
]),
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: () => {
}
}
}),
]),
])
]
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>以上两个结果是相等的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。