前言：工作中用到 vue+element ui 的前端框架，需要使用自定义表头，需要使用 re。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9710826.html
网站地址：我的个人vue+element ui demo网站
github地址：yuleGH github
代码如下：
<html> <head>
<title>自定义表头</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">
</head>
<body>
<div id="app"> <p style="color: red;">所有的打印数据，均在打印区里。
表格上的表头可以自定义表头，比如加个按钮，或者加一些其他的标签，甚至可以使用 elementUI 的其他标签，也可以添加事件。</p> <el-table :data="tableData" style="width: 100%"> <el-table-column label="姓名" width="100" prop="name">
</el-table-column> <el-table-column label="备注" width="180" prop="remark" :render-header="remarkRenderHeader">
</el-table-column> <el-table-column label="操作" :render-header="optRenderHeader">
</el-table-column> </el-table> <br/> <div style="margin-top: 20px">
<span>打印区</span>
<el-input type="textarea" v-model="printStr"></el-input>
</div>
</div> <!-- 引入组件库 -->
<script type="text/javascript" src="../lib/vue.js"></script>
<script type="text/javascript" src="../lib/elementui/index.js"></script> <script type="text/javascript"> new Vue({
el: "#app",
data: {
printStr: "", selectOptions : [
{value : "1", label : "选择一"},
{value : "2", label : "选择二"},
{value : "3", label : "选择三"},
], tableData: [{
date: '2000-10-27',
name: '余小乐',
address: '北京',
isRich: false,
remark : "我是备注",
selectOption : "2",
sex : "0"
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
isRich: true,
remark : "",
selectOption : "",
sex : "1"
}, {
date: '2016-05-01',
name: '小花',
address: '重庆市璧山区',
isRich: true,
remark : "",
selectOption : "",
sex : "0"
}, {
date: '1998-05-03',
name: '二哈',
address: '成都',
isRich: false,
remark : "",
selectOption : "",
sex : "1"
}]
},
methods: {
//在渲染表头的时候，会调用此方法，h为createElement的缩写版
remarkRenderHeader(h, {column, $index}){
return h("div", [
h("span", {}, "备注"),
h("el-button", {
attrs: {
"size" : "small"
},
on: {
click: this.handleClick
}
}, "按钮")
])
},
handleClick(){
this.printStr = "点击按钮了";
},
optRenderHeader(h, {column, $index}){
return h("span",[
h("span",{
"class":{
"red-star":true
}
},"*"),
h("span","加个星号操作列"),
])
}
}
});
</script> </body> </html>
完。整体代码见 GitHub，喜欢就star，不定时更新。
转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9710826.html
