element-ui自定义table表头，修改列标题样式
elementUI table表格一般的样式是这样的：
但是要改变表头是比较麻烦的一个事情，但是往往有些项目是需要的比如改成如下样式：
一般直接改起来挺麻烦，好在官网提供了一个方法：render-header
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
根据官方的方法来实现有两个方法：
方法一：vue的render函数来直接实现
<template>
<div>
<h2 align="center">自定义表头样式</h2>
<el-table :data="tableData" border stripe>
<el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
</el-table-column>
<el-table-column prop="date" label="日期" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '王小虎',
date: '2016-05-02',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王老五',
date: '2016-05-04',
address: '上海市普陀区金沙江路 1517 弄'
}],
tableHeader: [{
prop: 'name',
label: '姓名'
}, {
prop: 'date',
label: '时间'
}, {
prop: 'address',
label: '地址'
}],
}
},
methods: {
renderHeader(h, {column, $index}) {
// 这里在最外层插入一个div标签
return h('div',[// h即为cerateElement的简写
// 在div里面插入span
h('span', {
// 表示内容
domProps:{
innerHTML:column.label
},
on: {
click: () => {
console.log(`${column.label} ${$index}`)
}
}
}),
h('el-tooltip',{
// 表示属性
attrs: {
effect: "dark",
content: "备注信息",
placement: "top"
},
},[
h("i", {
'class': 'el-icon-warning table-msg'
})
])
])
},
}
}
</script>
运行效果：
对上面方法还有需要改进的地方，有时候在自定义的时候内容过于复杂，这个时候可以把内容都放到组件里面，在引进来插入进去。例如：
<!-- 使用PromptMessage.vue的组件 自定义表头 --> <template> <el-tooltip effect="dark" placement="top"> <div slot="content"> <span v-for="item in messages" :key="item"> {{item}} </span> </div> <i class="el-icon-question" style="color:#409eff;font-size:15px;"></i> </el-tooltip> </template> <script> export default { name:'promptMessage', props:['messages'] }; </script> <style scope> </style>
<!-- 新建名为 PromptMessage.vue 的组件 -->
<template>
<div>
<h2 align="center">自定义表头样式</h2>
<el-table :data="tableData" border stripe>
<el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
</el-table-column>
<el-table-column prop="date" label="日期" align="center" :render-header="renderHeaderTwo">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
</el-table>
</div>
</template>
<script>
/*
局部引入组件，也可以全局引入，在main.js
import promptmessage from '路径/PromptMessage.vue'
Vue.component('promptmessage', promptmessage)
*/
import promptmessage from './PromptMessage.vue'
export default {
data() {
return {
tableData: [{
name: '王小虎',
date: '2016-05-02',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王老五',
date: '2016-05-04',
address: '上海市普陀区金沙江路 1517 弄'
}],
tableHeader: [{
prop: 'name',
label: '姓名'
}, {
prop: 'date',
label: '时间'
}, {
prop: 'address',
label: '地址'
}],
}
},
methods: {
renderHeader(h, {column, $index}) {
// 这里在最外层插入一个div标签
return h('div',[// h即为cerateElement的简写
// 在div里面插入span
h('span', {
// 表示内容
domProps:{
innerHTML:column.label
},
on: {
click: () => {
console.log(`${column.label} ${$index}`)
}
}
}),
h('el-tooltip',{
// 表示属性
attrs: {
effect: "dark",
content: "备注信息",
placement: "top"
},
},[
h("i", {
'class': 'el-icon-warning table-msg'
})
])
])
},
renderHeaderTwo(h, {column, $index}) {
return h('div', [
h('span', {
domProps:{
innerHTML:column.label
}
}),
/*
把引入的组件插入进去。
这里的promptmessage已经是自定义组件(标签)，所以不需要加引号->"promptmessage",
否则会报组件未注册的错误。
*/
h(promptmessage, { props: {messages: ["备注信息2"]}, style: { 'cursor': 'pointer', } }) ]) }, } } </script>
效果图：注意promptmessage已经是自定义组件(标签)，所以不需要加引号。
方法二：直接使用JSX语法，此方法最简单，但是必须安装编译插件
详细细心去官网看吧。
1. 先安装JSX语法编译工具：
npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
2. 配置.babelrc文件:
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
3. 编写代码：
<template>
<div>
<h2 align="center">自定义表头样式</h2>
<el-table :data="tableData" border stripe>
<el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
</el-table-column>
<el-table-column prop="date" label="日期" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '王小虎',
date: '2016-05-02',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王老五',
date: '2016-05-04',
address: '上海市普陀区金沙江路 1517 弄'
}],
tableHeader: [{
prop: 'name',
label: '姓名'
}, {
prop: 'date',
label: '时间'
}, {
prop: 'address',
label: '地址'
}],
mesHtml:'只是一个提示'
}
},
methods: {
renderHeader(h, {column, $index}) {
return(
<div>
<span>{column.label}</span>
<el-tooltip class="tooltip" effect="dark" placement="top">
<div slot="content">
<span onClick={this.handleClick}>{this.mesHtml}</span>
</div>
<i class="el-icon-question"></i>
</el-tooltip>
</div>
)
},
handleClick(){
alert('点击')
}
}
}
</script>
运行效果如下，具体jsx语法就不做多介绍了。
